Question

I’m using the :nth-child selector to select certain elements

case 1:

<div class='item show'>
<div class='item show'>
<div class='item show'>
<div class='item show'>
<div class='item show'>
<div class='item show'>
<div class='item show'>
<div class='item show'>

and

case 2:

<div class='item show'>
<div class='item'>
<div class='item'>
<div class='item show'>
<div class='item'>
<div class='item'>
<div class='item show'>
<div class='item show'>

My code starts in case 1 and does $(‘#outerDiv .show:nth-child(3n – 2)’) to select every third element. This works perfectly. Then if the user changes some settings some of the elements lose their show class and disappear of the screen and the code looks like case 2. The problem is that now when i execute the $(‘#outerDiv .show:nth-child(3n – 2)’) selector, it still treats it as case 1 even though i can clearly see in the console that it’s case 2. Am i doing something wrong. Sorry I can’t post the actual code so i put up a quick example.

thanks

Answer 1

nth-child selector will get all the elements irrespective of the class..

Use a $.each and assign the class in the loop

​$('#outerDiv .show').each(function(i){
    if( i%3 === 0){
       $(this).addClass('a'); 
    }        
});​

Check Fiddle