Suppression de img par classe dans la boucle

Question

Je tente de construire un carrousel avec les données provenant d'un point de terminaison. Je ne sais pas quelle taille utiliser dans le serveur, donc au début je fais un peu de traitement pour décider de la taille de l'image à utiliser. Après cela, je cache les images qui ne sont pas utilisées. Quand je fais display:none, il émet toujours une requête HTTP et blesse donc mes performances. J'ai essayé d'utiliser remove() au lieu de .css('display','none'); mais cela a supprimé d'autres images depuis que j'utilise la classe.

Comment puis-je supprimer une image dans la boucle sans affecter les autres?

Ce les données, je reçois 10 des éléments suivants du serveur (composants).

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

} 

J'ai besoin d'un résultat final comme rendu en tant que 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

mis à jour selon les nouvelles informations en 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() 
     } 
    }); 
} 

Answer 2

Vous ne pouvez styler qu'un seul élément lors du ciblage par sa classe, donnez simplement son index. Si vous voulez juste le cacher et le re-montrer plus tard, je recommanderais .toggle(), sinon si vous voulez juste le supprimer, alors oui. Utiliser .remove() devrait fonctionner.

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