How to add class to first child with jQuery?

Question

How do I add a class an element on a container with a certain index?

I'm trying this right now which should affect the first element (doesn't work anyway)

$('#resultsBox li:first-child').addClass('aaaa');

But I want to be able to change class of any element in it's container having the index.

EG if I want to modify element with index = 2.

<div id="resultsBox">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>

Should become:

<div id="resultsBox">
<ul>
<li></li> // Index 0
<li></li> // Index 1
<li class="selected"></li> // Index 2
</ul>
</div>

Answer 1

Use :first selector:

$('#resultsBox li:first').addClass('aaaa');

and for the third element selection, you can use each() method: Here is jsFiddle.

$('ul li').each(function(i) {
    if ( i === 2 ) {
       $(this).addClass('aaaa');
    }
});

or you can do this with eq method like Jamiec & MrThys mentioned: but each method will be much usefull when things getting complicated.

$('#resultsBox li').eq(2).addClass('aaaa');