Count all div elements and add each number inside span using jQuery

Question

I need to show each number of div in the page in order

And add the value of each div inside span

so if I have 4 divs inside page like this

<div>first div</div>
<div>second div</div>
<div>third div</div>

every div need to show his order and be like this

<div>first div <span>1</span></div>
<div>second div <span>2</span></div>
<div>third div <span>3</span></div>

This html example code in jsfiddle

I need the output to be like this using jQuery

Keep track of a counter, starting with `1` (like `var counter = 1;`). Iterate over the `
` elements by using `$("div").each(function (idx, el) { });`, and inside of there, find the inner `` with `$(el).find("span")`, and set its inner text with `.text(counter++)`. Now try that and come back with problems — Ian, Aug 14 '13 at 15:16

score 10 · Accepted Answer · answered Aug 14 '13 at 15:16

10

Simple each loop does the trick:

$("div").each(function(i) {
    $(this).find("span").text(++i);
});

answered Aug 14 '13 at 15:16

tymeJV

score 1 · Answer 2 · answered Aug 14 '13 at 15:16

1

$("div").each(function(idx,elem) {
    $("<span>").text(idx).appendTo(wherever);
});

answered Aug 14 '13 at 15:16

Stephen Thomas

Amin Abu-Taleb · Answer 3 · 2013-08-14T15:23:16.913

1

You can try this:

$("div").each(function(i, elem){
 $(elem).append($("<span>"+(i+1)+"</span>"));
});

edited Aug 14 '13 at 15:23

answered Aug 14 '13 at 15:18

Amin Abu-Taleb

score 0 · Answer 4 · answered Aug 14 '13 at 15:16

0

var counter = 1;
$('h1').each(function () {
    $(this).find('span').html(counter);
    counter++;
});

answered Aug 14 '13 at 15:16

j08691

4 Answers4