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

您可以使用3n等$('.card-list:nth-child(3n)')

来选择每三个项目

Answer 2

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

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

Answer 3

这是否适合您：

@ResponseBody

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

Answer 5

我是通过filter函数完成的。在我看来，这是最安全的方式

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

如何用jquery选择每个第三个元素？

5 个答案: