I do not know much about arrays and numbering objects. I hope you understand what I mean with "numbering every li". So the first li gets the class "0", the second li gets the class "1", and so on.

Html

<div id="imtheking">
<ul>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
</ul>
</div>

Pseudo Javascript (Jquery)

$('#imtheking ul > li').number(starting from: '0');

Result HTML

<div id="imtheking">
<ul>
<li class="0">List Item</li>
<li class="1">List Item</li>
<li class="2">List Item</li>
<li class="3">List Item</li>
<li class="4">List Item</li>
<li class="5">List Item</li>
<li class="6">List Item</li>
</ul>
</div

Yeah I think a class name which contains only a number is incorrect.. So rather then a "0" or "1" it should be titled "number0" or "number1".

Thanks for your response!

I do not know much about arrays and numbering objects. I hope you understand what I mean with "numbering every li". So the first li gets the class "0", the second li gets the class "1", and so on.

Html

<div id="imtheking">
<ul>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
</ul>
</div>

Pseudo Javascript (Jquery)

$('#imtheking ul > li').number(starting from: '0');

Result HTML

<div id="imtheking">
<ul>
<li class="0">List Item</li>
<li class="1">List Item</li>
<li class="2">List Item</li>
<li class="3">List Item</li>
<li class="4">List Item</li>
<li class="5">List Item</li>
<li class="6">List Item</li>
</ul>
</div

Yeah I think a class name which contains only a number is incorrect.. So rather then a "0" or "1" it should be titled "number0" or "number1".

Thanks for your response!

• javascript
• jquery
• arrays
• numbers
• html-lists

• note that you are adding an extra layer of classes on a list that has no more information than there is already in the list, ie the sequence. – Caspar Kleijne Commented Jan 4, 2011 at 8:06
• @Caspar Kleijne - do we talk about the "index" value? I wasnt aware of that. – Tomkay Commented Jan 4, 2011 at 8:09
• I mean that if you are adding classes that are only inherent to an single element and it's presentation, in most cases there is no need to add a class. If all Items should be presented different, I doubt there is a use for a list. So one way or another, please explain what you trying to achieve. – Caspar Kleijne Commented Jan 4, 2011 at 8:14
• Also, numbers are not valid class names in HTML. You might want to look at the JQuery index function. – sje397 Commented Jan 4, 2011 at 8:17
• You should also consider using the OL tag. UL = unordered list, OL = ordered list. Since you seem to care about the order these items appear in it would be more semantically correct. – stef Commented Jan 4, 2011 at 8:25

3 Answers 3

$("#imtheking li").each(function(index) {
  $(this).addClass('number' + index);
});

You can do:

$('#imtheking li').each(function(index){
  $(this).attr('class', 'list_' + index);
});

Output will be:

<li class="list_0">List Item</li>
<li class="list_1">List Item</li>
<li class="list_2">List Item</li>
<li class="list_3">List Item</li>
<li class="list_4">List Item</li>
<li class="list_5">List Item</li>
<li class="list_6">List Item</li>

To retain the similar markup of yours and simply adding class is what you need, you can use addClass:

$('#imtheking li').each(function(index){
  $(this).addClass('list_' + index);
});

You could use this jquery plugin: http://slightlymore.co.uk/ol/

From their docs:

<ol id="first_example">
  <li>Item number 1</li>
  <li>Item number 2</li>
  <li>Item number 3</li>
  <li>Item number 4</li>
</ol>


$("ol#first_example").niceOrderedLists();

However it doesn't add a class, but it probably will help you achieve what you are trying to do.