give numbering to each div with same class name

Question

I have around 10 div elements with same class name e.g.

<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div> <!-- and so on.... -->

I want to give numbering to each div e.g.

<div class="div1">1</div>
<div class="div1">2</div>
<div class="div1">3</div>
<div class="div1">4</div>
<div class="div1">5</div>

Help appreciated.

Answer 1

Try like this

$('.div1').each(function(){
     $(this).text($(this).index() + 1);
});

See this FIDDLE

Answer 2

You can do this :

$('.div1').html(function(i){ return i+1 });

See documentation of the html function and demonstration.