Add Different Style to list tag using jquery/javascript

Question

Hi, Is there any ways to add different style class to all li in a ul tag using jquery/javascript/php. Consider I have a list as follows

<ul><li>a</li><li>b</li><li>c</li><li>d</li><li>e</li></ul>

I would like to add as follows

<ul><li class='cat1'>a</li><li class='cat2'>b</li><li class='cat3'>c</li><li class='cat4'>d</li><li class='cat5'>e</li></ul>

Answer 1

If you want to set the class, the cheaper way to do it is by using .attr() and the index in its setter function, like this:

$("ul li").attr("class", function(i) {
  return "cat" + (i+1);
});

If you aren't setting it and just adding, use .addClass(function(i) instead of .attr("class", function(i).

Answer 2

As simple as:

$('ul').children('li').addClass(function (i) {
    return 'cat' + (i+1);
});

http://api.jquery.com/addClass/

Answer 3

$('ul').children('li').each(function(i,v){
   $(this).addClass('cat'+(i+1));
});