Question

im a css/designer guy so please excuse my lameness in not knowing any .js

basically i want to know how to add an auto incremental id to a list item with javascript / jquery for something that i am trying to add some css to.

before

<li id=""><a href="">Item number 1</a></li>
<li id=""><a href="">Item number 2</a></li>
<li id=""><a href="">Item number 3</a></li>

after

<li id="1"><a href="">Item number 1</a></li>
<li id="2"><a href="">Item number 2</a></li>
<li id="3"><a href="">Item number 3</a></li>

thanks in advance and especially just for reading this

tried all the responses, nothing has worked on a plain html page with nothing but the ul/li items.

thanks to all that tried, i have failed in a big way…..im not a coder

Answer 1

I’m going to give your li tags an encompassing ul with an id in case there are other li tags on the page that you don’t want to order, but in jQuery this is pretty easy for:

<ul id="ordered">
    <li><a href="">Item number 1</a></li>
    <li><a href="">Item number 2</a></li>
    <li><a href="">Item number 3</a></li>
</ul>

You would simply use the each method:

$('#ordered li').each(function(i,el){
    el.id = i+1;
});

I would recommend using something other than just a plain integer for an id though, so maybe something like 'ordered' + (i+1) instead of just i+1 above.