Comment sauter un élément avec une classe spécifique dans une boucle jQuery ?

Question

J'ai une liste d'éléments :

<ul id="wpsl-stores">
    <li>list</li>
    <li>list</li>
    <li class="skipthis">list</li>
    <li>list</li>
    <li>list</li>
    <li>list</li>
    <li class="skipthis">list</li>
    <li>list</li>
</ul>

Je passe en revue les éléments et j'ajoute le numéro de l'élément en question :

var locCount = $('#wpsl-stores li').length;

for (i = 1; i < locCount+1; i++) {

    $('#wpsl-stores ul li:nth-child('+i+') strong:before').hide();

    $('body').append('<style>#wpsl-stores ul li:nth-child('+i+') strong:before {content:"'+i+'";}</style>');    

}

J'ai besoin d'ignorer les éléments qui ont la classe "skipthis".

Sur le site actuel, les éléments avec la classe "skipthis" sont cachés mais toujours dans le dom. Cela signifie que la boucle ci-dessus les compte toujours.

Pour l'instant, le résultat est à peu près le suivant : 1 list 2 list 4 list 5 list 6 list etc. etc.

J'ai besoin qu'il soit 1 list 2 list 3 list 4 list

Answer 1

Que diriez-vous de.. :

for (i = 1; i < locCount+1; i++) {
  var $listElt = $('#wpsl-stores ul li:nth-child('+i+') strong:before');
  if (!$listElt.hasClass('skipThis') {
    $listElt.hide();

    $('body').append('<style>#wpsl-stores ul li:nth-child('+i+') strong:before {content:"'+i+'";}</style>');    
  }
}

référence

Answer 2

Essayez d'ajouter .not

$('#wpsl-stores li').not( ".skipthis" )

source : http://api.jquery.com/not/

Answer 3

Vous devez sélectionner tous les éléments qui ne sont pas skipthis et passer en boucle pour les ajouter :

$('#wpsl-stores li:not(.skipthis)').each(function(i,li) {
   $('body').append('<style>#wpsl-stores ul li:nth-child('+(i+1)+') strong:before {content:"'+(i+1)+'";}</style>');
});

EDIT : Si vous voulez supprimer les skipthis et ajouter un compteur aux autres :

var listCount = 0;
$('#wpsl-stores li').each(function(i,li) {
   if ($(this).hasClass('skipthis')) {
      $(this).remove();
   } else {
      listCount++;   
      $('body').append('<style>#wpsl-stores ul li:nth-child('+listCount+') strong:before {content:"'+listCount+'";}</style>');
   }
});

Answer 4

Vous pouvez utiliser .each() pour l'itération et .hasClass() pour sauter certains éléments li :

$("#wpsl-stores li").each(function (index, element) {
   if (!$(element).hasClass('skipthis')) {
      // do something
   }
});