开发者

jQuery nth / Every 3rd

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 result开发者_Go百科s:

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


Try:

$(".ManagementOperations:nth-child(3n+1)").addClass('rowEnd');


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.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜