Meilleure méthode pour traverser dans chaque élément et effectuer une action via jQuery

Question

J'essaie de comprendre comment traverser en éléments en fonction d'un nom de classe et effectuer une action s'il a cette classe ou faire autre chose si ce n'est pas le cas.

S'il vous plaît voir mon code à ce jour:

<script type="text/javascript"> 
jQuery(document).ready(function($) { 
    var container = $('.container'); 

    container.each(function() { 
      // if all list item has class of hidden then hide parent container 
      container.hide(); 

      // if not all list item has class of hidden then show parent container 
      container.show(); 
    }); 
}); 
</script> 

<div class="container container1"> 
    <ul> 
      <li class="item">item 1</li> 
      <li class="item hidden">item 2</li> 
      <li class="item">item 3</li> 
      <li class="item">item 4</li> 
    </ul> 
</div> 

<div class="container container2"> 
    <ul> 
      <li class="item hidden">item 1</li> 
      <li class="item hidden">item 2</li> 
      <li class="item hidden">item 3</li> 
      <li class="item hidden">item 4</li> 
    </ul> 
</div> 

À partir du code ci-dessus est le résultat souhaité container2 doit être complètement caché parce que tout l'élément de liste au sein a une classe de « cachée ». Alors que container1 montre parce que tous les éléments de la liste n'ont pas la classe "hidden". Comme vous pouvez le voir, je suis allé jusqu'à utiliser la fonction "each" pour parcourir les conteneurs, mais je suis bloqué sur la façon de mettre en œuvre où il va vérifier chaque élément de la liste pour la classe spécifique. Ma pensée serait d'effectuer une autre fonction en son sein? Mais pas sûr ...

Merci de votre visite.

Answer 1

Vous pouvez encore sélectionner avec container comme context et cacher le récipient, lorsque le nombre d'objets cachés est égal à tous les éléments de la liste. Montrer autrement.

$('.container').each(function() { 
    var li1 = $('li', $(this)).length; 
    var li2 = $('li.hidden', $(this)).length; 
    if (li1 == li2) 
    $(this).hide(); 
    else 
    $(this).show(); 
}); 

Voir JSFiddle pour le test.

Answer 2

container.each(function() { 
    var $this = $(this); 
    if ($this.find('li:not(.hidden)').length) { 
     $this.show(); 
    } else { 
     $this.hide(); 
    } 
}); 

est ici le violon: http://jsfiddle.net/5AHQZ/

Answer 3

Ce que vous manquez quelque chose comme ceci est vous boucle:

jQuery(document).ready(function($) { 
    var container = $('.container > ul > li'); 

    container.each(function(index, element) { 
      if($(element).hasClass('hidden')){ 
      $(element).css({display: 'none'}); 
      } 
    }); 
}); 

Je Modified le sélecteur.

Cordialement,

Answer 4

$('.container').each(function() { 
    if ($(this).find('.item.hidden').length == $(this).find('.item').length) 
     $(this).hide(); 
    else 
     $(this).show();   
}); 

Answer 5

Jouer au golf de code:

$('.container').each(function() { 
    $(this).toggle(!!$('li:not(.hidden)',this).length); 
}); 

http://jsfiddle.net/mblase75/Ajjkc/