jQuery: Assign class based on index

Question

Using jQuery, is it possible to assign a class to an object based on its index?

For example, if I have an ul with five list items, how would I assign the class "0" to the first item, "1" to the second item, "2" to the third, item and so on?

This was my first attempt:

$('ul.nav li').each(function(index){
  $(this).addClass(index);
});

Your real problem is that classes can't start with numbers. Other than that this technique is fine. Append some text on the front of those classnames and you're good to go. — Surreal Dreams
– Surreal Dreams, Commented May 18, 2012 at 16:38

thecodeparadox · Accepted Answer · 2012-05-18 16:32:18Z

9

But avoid to start class or id with number;

$('ul.nav li').each(function(index){
  $(this).addClass('at_'+ index);
});

answered May 18, 2012 at 16:32

thecodeparadox

87.2k22 gold badges143 silver badges164 bronze badges

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

1 Comment

lucuma Over a year ago

This solution I'm guessing is a little cleaner since the each function is passed in the index, there is no reason to have to reference $(this) again.

Elliot Bonneville · Accepted Answer · 2012-05-18 16:31:15Z

7

Bearing in mind that classes can't start with numbers, something like this should do:

$('ul.nav li').each(function(){
  $(this).addClass("index_"+$(this).index);
});

answered May 18, 2012 at 16:31

Elliot Bonneville

53.6k24 gold badges101 silver badges125 bronze badges

1 Comment

Surreal Dreams Over a year ago

No problem. I'd have posted it with my answer if you hadn't beaten me to it. :)

Prasenjit Kumar Nag · Accepted Answer · 2012-05-18 16:32:43Z

1

Class names should not start with numbers. Instead do something like

$('ul.nav li').each(function(index){
  $(this).addClass("class_"+index);
});

answered May 18, 2012 at 16:32

Prasenjit Kumar Nag

13.5k3 gold badges47 silver badges57 bronze badges

Comments

Naveed · Accepted Answer · 2012-05-18 16:48:58Z

0

It is working for me with this:

$('ul.nav li').each(function(index){
  $(this).attr('class', 'class'+index);
});

http://jsfiddle.net/8JCXD/7/

edited May 18, 2012 at 16:48

answered May 18, 2012 at 16:32

Naveed

42.3k31 gold badges101 silver badges132 bronze badges

Collectives™ on Stack Overflow

jQuery: Assign class based on index

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related