jquery: addClass 1,2,3 etc. auto to a list

Question

is it possible, to add auto numeric classes to a list by using jquery?

html:

<ul id="list">
 <li>Element 1</li>
 <li>Element 2</li>
 <li>Element 3</li>
 <li>Element 4</li>
 <li>Element 5</li>
</ul>

i want to get something like this:

<ul id="list">
 <li class="1">Element 1</li>
 <li class="2">Element 2</li>
 <li class="3">Element 3</li>
 <li class="4">Element 4</li>
 <li class="5">Element 5</li>
</ul>

hope there is a solution available :-)

---

Edit

ok, mhhm but my list has not always a number at the end. so what's about a classname combination, like "item + number" ? is something like this possible?

<ul id="list">
 <li class="item1">Element x</li>
 <li class="item2">Element c</li>
 <li class="item3">Element a</li>
 <li class="item4">Element d</li>
 <li class="item5">Element f</li>
</ul>

Rawdin

I think you should add classes before page renders inside for loop – Verdie

Answer 1

   $("#list li").each(function(i) {
     this.addClass("item"+(i+1));
    });

Here it is in action

http://jsbin.com/ocake

Update per comments, as in example link this works :

$(document).ready(function() {
        $("#list li").each(function(i) {
        $(this).addClass("item" + (i+1));
        });
      });

But I think initial code should work by adding :

this = $(this);

But not sure.

Verdie

Answer 2

$("#list").children().each(function(i) {
  $(this).addClass("prefix_" + (i+1));
});

Germano

+1, simplest solution and doesn't require string parsing. Small fix: should be this.addClass(i+1). – Daltondaltonism

This is assuming you want to add the class based on the elements position, as opposed to the text contained inside it (which everyone else seems to have assumed..) – Germano

thanks :-), but that function does not work, also the i+1 fix doesn't :-?? – Rawdin

no, it does not :?? but firebug reports no problems.. strange – Rawdin

tested the above code on my pc - it definitely works - make sure your <ul> has the id of "list" – Germano

This is overkill. For this specific purpose, $("#list li") is far better than $("#list").children(). – Kronstadt

Care to explain why it's far better? – Germano

Answer 3

CSS 2 has some special rules relating to numeric class names. See the grammar, specifically "class" within G.1, "nmstart" in G.2, and the final bullet point in G.3.

Using classes .c1 through .c5:

$('#list li').each(function(){
    $(this).addClass( 'c' + $(this).text().substr(-1) );
});

Note that this assumes the very last character of the <li> is a number. You may have to tweak (possibly using regex) for your exact use case.

Timeserver

I think numbers are allowed - see the last line in your link. – Daltondaltonism

Ah, thanks for pointing it out. This was a case where years ago I hit a browser that didn't support numeric classes, so I stopped using them, then this post prompted me to find out the "why" :) – Timeserver

@macek I know, I already pointed that out in my answer. Ostensibly this is a site for programmers, who I hope would have some ability to adapt what they are learning within this site. – Timeserver

Answer 4

For jQuery 1.4.x:

$("#list > li").addClass(function(i){return "item" + (i + 1);});

Peursem

Answer 5

$('ul#list li').each(function(){
  $(this).addClass( $(this).text().split(' ')[1] );
});

Marrissa

Answer 6

ok, mhhm but my list has not always a number at the end. so what's about a classname combination, like "item + number" ? is something like this possible?

<ul id="list">
 <li class="item1">Element x</li>
 <li class="item2">Element c</li>
 <li class="item3">Element a</li>
 <li class="item4">Element d</li>
 <li class="item5">Element f</li>
</ul>

Rawdin

If your question has changed, you should delete this answer and instead rewrite the question. – Timeserver

@Adam Backstrom, I cleaned this up for him. – Kronstadt