How to select every third element with jquery?

Question

I'm using Bootstrap 3 and styling a card list. The cards have different heights according to their content. I want to add a div.clearfix after every third card.

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

Problem is I can only manage to get the third, but not the sixth, etc.

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

Yan Pak · Answer 1 · 2016-07-27T12:39:00.543

2

I do it by filter function. This is the most safe way in my opinion

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

edited Jul 27 '16 at 12:39

answered Jul 27 '16 at 12:33

Yan Pak

1,767
2
19
15

score 2 · Answer 2 · answered Jul 27 '16 at 12:34

2

You can select every third item using 3n like $('.card-list:nth-child(3n)')

answered Jul 27 '16 at 12:34

Theodore K.

5,058
4
30
46

This partially works. Except it selects the second element, then goes 3 by 3 as it's supposed to. I don't understand why it affects my second card. – Amelie Jul 28 '16 at 06:42
Are you sure? Check this out http://codepen.io/8odoros/pen/yJERQX it works. I don't see selecting the second child. Please explain... – Theodore K. Jul 28 '16 at 06:48

score 1 · Answer 3 · answered Jul 27 '16 at 12:37

1

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

Try the above code. see if it works. If it doesn't work can you make a fiddle.

answered Jul 27 '16 at 12:37

thevarunraja

326
3
8

score 1 · Answer 4 · answered Jul 27 '16 at 12:53

1

Does this works for you:

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

answered Jul 27 '16 at 12:53

Danko

1,819
1
13
12

score 1 · Accepted Answer · answered Jul 28 '16 at 11:04

I found out what was wrong. Not sure I understand though. The .card-list were not the only elements in my row.

The $('.card-list:nth-child(3n)') was not only counting the .card-list but also what came before, even though it didn't have the .card-list class.

I should have checked that earlier, thank you for the help by the way.

Here is what I had :

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

Here is what I had to do in order for the $('.card-list:nth-child(3n)') to work:

<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, that's an answer to a different question as the original code changed. In such cases the best path is to wrap up the old question by accepting the best answer, and create a new question with the new requirements. — Theodore K., Jul 29 '16 at 12:44

How to select every third element with jquery?

5 Answers5