如何使用 jquery 选择每三个元素？答案

【问题标题】：How to select every third element with jquery?如何使用 jquery 选择每三个元素？
【发布时间】：2016-12-01 11:13:04
【问题描述】：

我正在使用 Bootstrap 3 并设置卡片列表的样式。卡片根据其内容具有不同的高度。我想在每三张卡片之后添加一个 div.clearfix。

<div class="col-xs-12 col-sm-6 col-md-4 card-list">
Card here
</div>
<div class="col-xs-12 col-sm-6 col-md-4 card-list">
Card here
</div>

问题是我只能设法获得第三个，而不是第六个，等等。

 $('.card-list:nth-child(5)').after('<div class="clearfix"></div>');

【问题讨论】：

标签： jquery css twitter-bootstrap clearfix

【解决方案1】：

您可以使用3n 选择每第三个项目，例如$('.card-list:nth-child(3n)')

【讨论】：

这部分有效。除了它选择第二个元素，然后按预期进行 3 乘 3。我不明白为什么它会影响我的第二张卡。
你确定吗？看看这个codepen.io/8odoros/pen/yJERQX 它有效。我没有看到选择第二个孩子。请解释...

【解决方案2】：

$('.card-list:nth-child(3n+3)').after('<div class="clearfix"></div>');

试试上面的代码。看看它是否有效。如果它不起作用，你可以做一个小提琴。

【讨论】：

【解决方案3】：

这对你有用吗：

var $clearfix = '<div class="clearfix">clearfix</div>';
$('.card-list:nth-child(3n+0)').append($clearfix);

【讨论】：

【解决方案4】：

我发现出了什么问题。我不确定我是否理解。 .card-list 不是我行中唯一的元素。

$('.card-list:nth-child(3n)') 不仅计算 .card-list 还计算之前的内容，即使它没有 .card-list 类。

我应该早点检查一下，顺便谢谢你的帮助。

这是我的：

<div class="row">
    <div class="col-xs-12 text-center">
        <h2 class="title-bullet-small">Title</h2>
    </div>
    <div class="col-xs-12 list-filters">
        Some forms
    </div>
    <div class="card-list">
        Card
    </div>
    <div class="card-list">
        Card
    </div>
    <div class="card-list">
        Card
    </div>
</div>

为了让$('.card-list:nth-child(3n)') 工作，我必须做以下事情：

<div class="row">
    <div class="col-xs-12 text-center">
        <h2 class="title-bullet-small">Title</h2>
    </div>
    <div class="col-xs-12 list-filters">
        Some forms
    </div>
</div>
<div class="row">
    <div class="card-list">
        Card
    </div>
    <div class="card-list">
        Card
    </div>
    <div class="card-list">
        Card
    </div>
</div>

【讨论】：

Amelie，随着原始代码的更改，这是对另一个问题的回答。在这种情况下，最好的方法是通过接受最佳答案来结束旧问题，并根据新要求创建一个新问题。

【解决方案5】：

我通过filter 函数来实现。这是我认为最安全的方式

$('.card-list').filter(function(a){return a%3 == 0;}).after('<div class="clearfix"></div>');

【讨论】：