在循环内移除img

我试图用来自端点的数据构建轮播。我不知道要在服务器中使用哪种尺寸，所以在前端我会做一些处理来决定要使用的图像的大小。之后，我隐藏未使用的图像。当我做display:none它仍然会触发HTTP请求，从而伤害我的表现。我试图使用remove()而不是.css('display','none');，但因为我正在使用类，所以删除了其他图像。在循环内移除img

如何在循环中删除图像而不影响其他图像？

这个数据，我从服务器（组件）获得以下10个。

<div class="foo-grid-img"> 
    <img src="https://cdn.com/image/1.jpg" class="foo-big" /> 
    <img src="https://cdn.com/image/2.jpg" class="foo-small" /> 
    <img src="https://cdn.com/image/3.jpg" class="foo-horizontal" />  
    <img src="https://cdn.com/image/4.jpg" class="foo-vertical" /> 
</div> 

<div class="foo-grid-img"> 
    <img src="https://cdn.com/image/a.jpg" class="foo-big" /> 
    <img src="https://cdn.com/image/b.jpg" class="foo-small" /> 
    <img src="https://cdn.com/image/c.jpg" class="foo-horizontal" />  
    <img src="https://cdn.com/image/d.jpg" class="foo-vertical" /> 
</div> 

var fooConf = [['big'],['vertical','big'],['small','small','horizontal'],['vertical','big','horizontal','horizontal'],['vertical','big','horizontal','small','small']]; 


for (var i = 0; i < components.length; i++) { 

    // elided 

    var fooClass = fooConf[components.length-1][i]; 

    if("foo-"+fooClass != fooBig.attr("class")) { 
     cItem.find('.foo-big').css('display','none'); 
    } 
    if("foo-"+fooClass != fooSmall.attr("class")) { 
     cItem.find('.foo-small').css('display','none'); 
    } 
    if("foo-"+fooClass != fooHorizontal.attr("class")) { 
     cItem.find('.foo-horizontal').css('display','none'); 
    } 
    if("foo-"+fooClass != fooVertical.attr("class")) { 
     cItem.find('.foo-vertical').css('display','none'); 
    } 

}

我需要一个最终结果，如下面呈现为html。

<div class="foo-grid-img"> 
    <img src="https://cdn.com/image/1.jpg" class="foo-big" /> 
</div> 

    <div class="foo-grid-img"> 
     <img src="https://cdn.com/image/d.jpg" class="foo-vertical" /> 
    </div>

来源

2017-10-13 DarthVader

我不知道如果我理解正确你的问题。请确认我的理解：您从API获取5张图片，并从给定的5张图片中选择一张。正确？ –

尝试使用$ .each（） – Osama

5套图像集。像上面那些。他们都有定义相同类的图像。看每组有4个图像，我需要从每个组中删除3，每组1。 – DarthVader

问题更新每个新的信息：

var $imageDivs = $('div.foo-grid-img'); //grab all sets 

//iterate over all sets and remove images that dont belong in the corrensponding fooConf[i] 
for(var i = 0; i < fooConf.length; i++) { 
    $imageDivs[i].find('img').each(function(){ 
     var $this = $(this); 
     var className = $this.attr('class'); 
     if(!$.inArray(className.replace('foo-', ''), fooConf[i])){ 
      $this.hide(); //or remove() 
     } 
    }); 
}

来源

2017-10-13 18:56:18 awd

5套图像集。像上面那些。他们都有定义相同类的图像。看每组有4个图像，我需要从每个组中删除3，每组1。 – DarthVader

请参阅上面的最终结果。 – DarthVader

你的例子中的fooClass是什么？ – awd

您只能在按类定位时设置一个元素的样式，只需指定它的索引即可。如果你只是想隐藏它，然后重新显示它，我会推荐.toggle（），否则如果你只是想删除它，然后是使用.remove（）应该工作。

for (var i = 0; i < components.length; i++) { 

    // elided 

    if("foo-"+fooClass != fooBig.attr("class")) { 
     cItem.find('.foo-big')[i].toggle(); 
    } 
    if("foo-"+fooClass != fooSmall.attr("class")) { 
     cItem.find('.foo-small')[i].toggle(); 
    } 
    if("foo-"+fooClass != fooHorizontal.attr("class")) { 
     cItem.find('.foo-horizontal')[i].toggle(); 
    } 
    if("foo-"+fooClass != fooVertical.attr("class")) { 
     cItem.find('.foo-vertical')[i].toggle(); 
    } 
}

来源

2017-10-13 18:54:37

您向服务器发送额外的请求。并删除一个类将删除所有的类。不好。 – DarthVader

在循环内移除img

回答

相关问题