How to Insert an incremental variable with Javascript/Jquery?

Question

This, I'm sure is a pretty basic question about JavaScript, so apologies in advance.

I have simple unordered list:

<ul>
   <li><a href="">Item number 1</a></li>
   <li><a href="">Item number 2</a></li>
   <li><a href="">Item number 3</a></li>
   <li><a href="">Item number 4</a></li>
   <li><a href="">Item number 5</a></li>
</ul>

How would I be able to prepend an incremental number to those 5 items, so I get:

<ul>
   <li><span>1</span><a href="">Item number 1</a></li>
   <li><span>2</span><a href="">Item number 2</a></li>
   <li><span>3</span><a href="">Item number 3</a></li>
   <li><span>4</span><a href="">Item number 4</a></li>
   <li><span>5</span><a href="">Item number 5</a></li>
</ul>

The logic behind the increment variable is getting me.

Christian C. Salvadó · Accepted Answer · 2009-11-04 06:02:35Z

4

You can iterate over the elements using $.each, using the index argument on the callback function, then build the span element using the current element, and we prepend it to the li:

$('ul li').each(function (i) {
  $('<span>'+ (i+1) +'</span>').prependTo(this);
  // or $('<span></span>').html(i+1).prependTo(this);
});

Check the above snippet here.

Note that I'm adding one to the index i+1, that's because the indexes are zero-based, also I wrap the addition between parentheses because it is in the middle of a string concatenation.

answered Nov 4, 2009 at 6:02

Christian C. Salvadó

831k185 gold badges929 silver badges845 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Eimantas · Accepted Answer · 2009-11-04 06:00:44Z

0

In steps it'd look like this:

You take all LI items and iterate through all of them by adding span with (lis[index]+1)
Next time you insert a LI element you insert it with span who's text is lis.length+1.

answered Nov 4, 2009 at 6:00

Eimantas

49.5k17 gold badges134 silver badges173 bronze badges

Collectives™ on Stack Overflow

How to Insert an incremental variable with Javascript/Jquery?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related