CODEWITHSUNDEEP
javascriptjquerycssimagehttp
DarthVader
DarthVader

Reputation: 55052

Removing img by class within loop

I am trying to build carousel with the data coming from an endpoint. I don't know which size to use in server so at front end I do some processing to decide the size of the image to use. After that, I hide the images that are not used. When I do display:none it still fires HTTP request and hence hurts my performance. I tried to use remove() instead of .css('display','none'); but that removed other images since I am using class.

How can I remove an image within the loop without affecting others?

This the data, I get 10 of the following from the server (components).

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

}

I need an end result as following rendered as 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>

Upvotes: 0

Views: 76

Answers (2)

awd
awd

Reputation: 2322

updated as per new info in question:

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

Upvotes: 2

Jared Bledsoe
Jared Bledsoe

Reputation: 559

You can style only one element when targeting by it's class, simply give the index of it. If you just want to hide it and later re-show it, I'd recommend .toggle(), otherwise if you just want to delete it then yes using .remove() should work.

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

Upvotes: 0

Related Questions