Question

I’m trying to use jquery to set the class of all visible elements of pattern (3n+1), but it doesn’t seem to be selecting the way that I anticipated. I’m wondering if my syntax is wrong. Here’s my code:

$('.filterElement:visible:nth-child(3n+1)').addClass('firstInRow');

I was following the method suggested here:

Make css nth-child() only affect visible

Is there a way to do this with pure css?

Answer 1

nth-child doesn’t seem to play well when there is hidden items…period. You can see an example here: http://jsfiddle.net/anAgent/FzBWn/. Click on the “Test 2” button to run the selector against the collection of rows that contain hidden values. The jQuery code below is how you can select what you need.

CSS

.container {float:left;}
.row { display:block; border: 1px solid black; padding:10px; width:100px;}
.row.odd {border: 2px dotted red;background-color:yellow;}
.hidden {visibility:hidden;display:none;}

HTML

<div class="container"> 
    <div id="1" class="row">Highlighted</div>
    <div id="2" class="row"></div>
    <div id="3" class="row hidden">I shouldn't be highlighted</div>
    <div id="4" class="row"></div>
    <div id="5" class="row">Highlighted</div>
    <div id="6" class="row"></div>
    <div id="7" class="row hidden">I shouldn't be highlighted</div>
    <div id="8" class="row"></div>
    <div id="9" class="row">Highlighted</div>
    <div id="10" class="row"></div>
    <div id="11" class="row"></div>
</div>
<div class="container"> 
    <div id="1" class="row">Highlighted</div>
    <div id="2" class="row"></div>
    <div id="3" class="row "></div>
    <div id="4" class="row">Highlighted</div>
    <div id="5" class="row"></div>
    <div id="6" class="row"></div>
    <div id="7" class="row">Highlighted</div>
    <div id="8" class="row"></div>
    <div id="9" class="row"></div>
    <div id="10" class="row">Highlighted</div>
    <div id="11" class="row"></div>
</div>

jQuery
Get all visible items and then find if it’s the third one in the list.

$('.row:visible').each(function(idx) {
    $(this).toggleClass('odd',(idx%3 == 0));
});