Jquery - Get xth element

Question

For example, I have a div with an id (lets say "the_div"). This div contains an unordered list, and this list has 5 items in it.

How would I add a class to the third list item, without any of the list items having a class attached to them?

Edit: Even better, how would I change the list item text to equal what number element it was?

Thanks.

Answer 1

For your first problem, you can use eq, which is 0 based:

$('ul li', '#thediv').eq(2).addClass('whatever'); // add class to 3rd item

For your second problem, you can use each to iterate through all the list items. The callback function passes an argument containing the index of the current element in the set:

$('ul li', '#thediv').each(function(i) {
    $(this).text(i); // update each list item with its index, 0 based.
});

Answer 2

Or...

$('#the_div ul li:eq(2)').addClass('className');

You can combine the selectors together - if you prefer :)