insert element in the dom using javascript or jquery

Question

I am using this script to insert three different span 's to the 1st, 2nd and 3rd li s.

$("ul li:eq(0)").prepend("<span>1</span>");
$("ul li:eq(1)").prepend("<span>2</span>");
$("ul li:eq(2)").prepend("<span>3</span>");

Is there a way to refactor this code to remove the redundancy?

Answer 1

If you want to do it to all li tags that are there:

$("ul li").each(function(i) {
    $(this).prepend("<span>" + (i + 1) + "</span>");
});

If there are more than three li tags and you only want it done to the first three:

$("ul li:lt(3)").each(function(i) {
    $(this).prepend("<span>" + (i + 1) + "</span>");
});

Working jsFiddle here: http://jsfiddle.net/jfriend00/qhgad/

Answer 2

Or you can do this like this

  $("ul li").prepend( function(index, html){
               return ("<span>" + (index+1) + "</span>");
   });