如何在 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>

我想为每第四个 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 之前恰好有两个元素代码>s.

是否有一个类似 nth-child 的选择器（或方法），在计数时只考虑指定的元素？

Answer 1

您可以使用过滤器函数来获取每第四个元素，如下所示：

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

工作示例@：

http://jsfiddle.net/wCxSv/

Answer 2

在 jQuery 1.9+ 中 :nth-of-type 可以在这里工作。

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

参考：对 :nth-of 的一个很好的描述-type 与 :nth-child

Answer 3

你总是可以自己做：

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

Answer 4

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

基本思想是使用模数运算符 (%) 与每个或过滤器结合来迭代元素，并且仅在模数没有返回余数时才应用操作（即，迭代的索引是您想要的倍数。）这是很多情况下的常见做法。
您还可以对每个函数执行类似的操作。

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