How to skip element with specific class in jQuery for loop?

Question

I have a list of elements:

<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>

I'm looping through the elements and appending the number of that element:

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

}

I need to skip the elements that have the "skipthis" class.

On the actual site, the elements with the "skipthis" class are hidden but still in the dom. This means the loop above is still counting them.

Right now, the output is something like this: 1 list 2 list 4 list 5 list 6 list etc. etc.

I need it to be 1 list 2 list 3 list 4 list

I would grab the li elements, and then use the hasClass to check if they are skipThis and splice them out. — Ryan Wilson, Feb 01 '18 at 20:39
Possible duplicate of [jQuery .hasClass() vs .is()](https://stackoverflow.com/questions/4901553/jquery-hasclass-vs-is) — AGoranov, Feb 01 '18 at 20:39

score 0 · Answer 1 · answered Feb 01 '18 at 20:38

How about:

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

reference

score 0 · Answer 2 · answered Feb 01 '18 at 20:38

0

try adding .not

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

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

answered Feb 01 '18 at 20:38

gwalshington

1,418
2
30
60

fanfavorite · Accepted Answer · 2018-02-01T21:22:21.720

0

You should select all the elements that aren't skipthis and loop through to add:

$('#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: If you want to remove the skipthis ones and add a counter to the others:

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

edited Feb 01 '18 at 21:22

answered Feb 01 '18 at 20:42

fanfavorite

5,128
1
31
58

Can you look at my updated question? Your solution is giving me the same output. – user715564 Feb 01 '18 at 20:49
No, I am still getting the same problem. If the second `li` has the skipthis class than it's hidden but still in the dom. This means the third `li` is is getting "3" appended instead of "2". – user715564 Feb 01 '18 at 21:02
Use remove then to take it out of the dom. – fanfavorite Feb 01 '18 at 21:23

score 0 · Answer 4 · answered Feb 01 '18 at 20:45

0

You can use .each() for iteration and .hasClass() to skip some li elements:

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

answered Feb 01 '18 at 20:45

DenysM

389
1
2
13

How to skip element with specific class in jQuery for loop?

4 Answers4