如何选择每个第三个元素与jQuery？

我正在使用Bootstrap 3并为卡列表造型。根据其内容，这些卡片具有不同的高度。我想在每三张牌后添加一个div.clearfix。如何选择每个第三个元素与jQuery？

<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>');

来源

2016-07-27 Amelie

我发现了什么是错误的。不知道我理解。 .card列表不是我排的唯一元素。

$('.card-list:nth-child(3n)')不仅计数.card列表，但也是之前发生的事情，即使它没有.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>

来源

2016-07-28 11:04:34 Amelie

Amelie，这是对原始代码更改后不同问题的回答。在这种情况下，最好的途径是通过接受最佳答案来结束旧的问题，并用新的要求创建一个新问题。 –

我通过filter功能做到这一点。这是在我看来

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

来源

2016-07-27 12:33:32

最安全的方式，你可以选择像$('.card-list:nth-child(3n)')

来源

2016-07-27 12:34:33

这部分工作。除了它选择第二个元素，然后按照它应该的3乘3。我不明白为什么它会影响我的第二张牌。 – Amelie

你确定吗？看看这个http://codepen.io/8odoros/pen/yJERQX它的工作原理。我没有看到选择第二个孩子。请解释... –

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

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

来源

2016-07-27 12:37:07

这是否对你的作品：

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

来源

2016-07-27 12:53:32 Danko

如何选择每个第三个元素与jQuery？

回答

相关问题