如何用 jquery select 每三个元素？

Question

我正在使用 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>');

Answer 1

我用filter函数来做。这是我认为最安全的方式

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

Answer 2

您可以 select 每三个项目使用 3n 就像 $('.card-list:nth-child(3n)')

Answer 3

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

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

Answer 4

这对你有用吗：

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

Answer 5

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

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

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

这是我得到的：

<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>

如何用 jquery select 每三个元素？

How to select every third element with jquery?

css

jquery

clearfix

twitter-bootstrap