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

您可以使用过滤函数来获取每 4 个元素，如下所示:

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

工作示例@:

http://jsfiddle.net/wCxSv/