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之前正好有两个元素。

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

Answer 1

您可以使用过滤器功能获取每个第4个元素，如下所示：

$('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（ '巴'）;

参考：A good description of :nth-of-type vs :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');
 });

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

4 个答案: