Question

I’ve got some markup that looks like this:

<h3>Mgmt</h3>   
<div class="ManagementOperations">bla bla </div>
<div class="ManagementOperations">bla bla </div>
<div class="ManagementOperations">bla bla </div>
<div class="ManagementOperations">bla bla </div>
<div class="ManagementOperations">bla bla </div>
<h3>People</h3>
<div class="people">bla bla </div>
<div class="people">bla bla </div>
<div class="people">bla bla </div>
<div class="people">bla bla </div>
<div class="people">bla bla </div>
<div class="people">bla bla </div>

The number of each divs going from 2 – 100 for both of the categories

I want to add the class rowEnd to every 3rd ‘ManagementOperations’ and every 3rd ‘ManagementOperations’ the count resets whn there is a change in class.

Any ideas? I’m using this with poor results:

$(".ManagementOperations:nth-child(4n)").addClass('rowEnd');

Answer 1

The :nth-child Selector will find each element that is the nth child of its parent. It appears as though all of your elements, including your h3s have the same parent, so it’ll only apply to every 3rd element that you’ve given, e.g. the 2nd div. You could wrap each collection of divs in another div as to constrain the parent’s children to just those divs. Or you could do something like this:

$(".ManagementOperations").each(function(index) {
    if ((index+1) % 3 == 0) $(this).addClass('rowEnd');
});

Something like that anyway, I haven’t tested it.