如何选择jQuery中每个特定子元素的第n个？

Question

我有这个标记：

<div id="container"> 

    <h1>Heading</h1> 

    <p>Some text</p> 

    <div class="foo">Some stuff</div> 
    <div class="foo">Some stuff</div> 
    <div class="foo">Some stuff</div> 
    <div class="foo">Some stuff</div> 
    <div class="foo">Some stuff</div> 
    <div class="foo">Some stuff</div> 
    <!-- ... same thing on down the page ... --> 
    <div class="foo">Some stuff</div> 
    <div class="foo">Some stuff</div> 
    <div class="foo">Some stuff</div> 

</div> 

我想添加一个类每四个格。下面是我预期会的工作jQuery的：

$('div.foo:nth-child(4n)').addClass('bar'); 

但它会导致：

<div id="container"> 

    <h1>Heading</h1> 

    <p>Some text</p> 

    <div class="foo">Some stuff</div> 
    <div class="foo bar">Some stuff</div> 
    <div class="foo">Some stuff</div> 
    <div class="foo">Some stuff</div> 
    <div class="foo">Some stuff</div> 
    <div class="foo bar">Some stuff</div> 
    <div class="foo">Some stuff</div> 
    <div class="foo">Some stuff</div> 
    <div class="foo">Some stuff</div> 
    <div class="foo bar">Some stuff</div> 
    <div class="foo">Some stuff</div> 
    <div class="foo">Some stuff</div> 
    <div class="foo">Some stuff</div> 
    <div class="foo bar">Some stuff</div> 
    <div class="foo">Some stuff</div> 
    <div class="foo">Some stuff</div> 
    <div class="foo">Some stuff</div> 

</div> <!-- #container --> 

所以，很显然所有儿童被计数，仅匹配元素被添加类。我可以考虑其他两个元素并使用:nth-child(4n+2)，但我不能总是指望在我的div之前有两个元素。

是否有只在计数时考虑指定元素的第n个子选择器（或方法）？

Answer 1

您可以使用过滤功能，以获得每4个要素如下：

$('div.foo').filter(function(index){ 
return (index%4 == 3); 
}).addClass('bar'); 

工作例如@：

http://jsfiddle.net/wCxSv/

Answer 2

你总是可以自己做：

$('div.foo').each(function(i) { 
    if(i % 4 != 3) 
    return 
    $(this).addClass('bar') 
}) 

Answer 3

http://api.jquery.com/filter/#using-filter-function 伟大的教程。关于使用过滤器。

基本思想是使用模运算符（％）与每个或过滤器结合来遍历元素，并且仅在模数不返回余数时应用动作（即，迭代的索引是您的倍数欲望）。这在很多情况下都是常见的做法。 你也可以对每个功能做类似的事情。

$('div.foo').each(function(index) { 
    if((index+1)%4 == 0){ 
    $(this).addClass('bar'); 
}); 

Answer 4

在jQuery 1.9+ :nth-of-type会在这里工作。

$（'div.foo:nth-of-type(4n)').addClass('bar'）;

参考：A good description of :nth-of-type vs :nth-child