Count the number of elements with a specific class, then add an ID that numbers them

Question

I'm very new to this, just trying to piece together snippets from other posts.

I'm unsure how to count the number of elements on a page, then add a class to differentiate them with a number.

<script type="text/javascript">
$(document).ready(function(){
    $('.item').each(function (e) { $(this).addClass('count' + e); });
});
</script>

<div class="item"></div>
<div class="item"></div>
<div class="item"></div>

output to:

<div class="item count1"></div>
<div class="item count2"></div>
<div class="item count3"></div>

What you have there should work (what you call "e" should be the index of the each loop, which should be exactly what you want); could you explain the problem you're having? — machineghost, Jul 13 '12 at 21:45

score 2 · Accepted Answer · answered Jul 13 '12 at 21:45

2

Try this

$('div.item').each(function(i,n){ $(n).addClass('count' + (i + 1));});

answered Jul 13 '12 at 21:45

labroo

2,901
3
27
36

Marking it as an answer will be much appreciated. – labroo Jul 14 '12 at 23:37

score 1 · Answer 2 · answered Jul 13 '12 at 21:45

1

Try this:

$('.item').each(function (i, e) { $(e).addClass('count' + i); });

answered Jul 13 '12 at 21:45

GTSouza

365
4
16

score 1 · Answer 3 · answered Jul 13 '12 at 21:49

1

$('.item').addClass(function(i){
    return "count" + (i + 1);
});

answered Jul 13 '12 at 21:49

Esailija

138,174
23
272
326

score 1 · Answer 4 · answered Jul 13 '12 at 21:50

1

What you have is just fine if you just change:

$(this).addClass('count' + e);

to

$(this).addClass('count' + (e + 1));

answered Jul 13 '12 at 21:50

Kieran

5,906
3
24
34

Count the number of elements with a specific class, then add an ID that numbers them

4 Answers4

Linked