selecting 2nd and 3rd list items in a list with jquery

Question

Hi,

I have a list.

<ul id="navigation">
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>

And using jquery id like to apply a clas to the 2nd and 3rd list items.

Is there simple code for me to do this?

Thanks

Answer 1

You are looking for the nth child selector.

$("ul li:nth-child(2)").addClass('MyClass');

Answer 2

The simplest approach is to use the comma separator to group the 2nd and 3rd list items:

$("#navigation li:nth-child(2), #navigation li:nth-child(3)").addClass("name");

Answer 3

$("#navigation li:eq(1), #navigation li:eq(2)").addClass("someClass");

Have a look at the :eq selector.

Answer 4

While Cletus is right, and the simplest thing you can do is use the standard jQuery comma-separated list, if it turns out you need to choose a whole lot of them, you should start looking at the .nextUntil() and .prevUntil() methods. You'd use them like so:

$("#navigation li:nth-child(2)").nextUntil(":nth-child(4)").addClass("name");

Answer 5

Try it

$("#navigation li:gt(0):lt(2)").addClass("t");