在循环中按类删除 img

Question

我正在尝试使用来自端点的数据构建轮播。我不知道在服务器中使用哪种尺寸，所以在前端我做了一些处理来决定要使用的图像的尺寸。之后，我隐藏未使用的图像。当我执行display:none 时，它仍然会触发 HTTP 请求，因此会损害我的性能。我尝试使用remove() 而不是.css('display','none');，但是由于我正在使用类，因此删除了其他图像。

如何在不影响其他人的情况下删除循环内的图像？

这个数据，我从服务器（组件）得到以下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>

Answer 1

根据相关新信息更新：

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()
        }   
    });
}

Answer 2

当按其类定位时，您只能设置一个元素的样式，只需给出它的索引即可。如果您只是想隐藏它并稍后重新显示它，我建议您使用 .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();
    }
}