How to get nth jQuery element

Question

In jQuery, $("...").get(3) returns the 3rd DOM element. What is the function to return the 3rd jQuery element?

Answer 1

You can use the :eq selector, for example:

$("td:eq(2)").css("color", "red"); // gets the third td element

Or the Traversing/eq function:

$("td").eq(2).css("color", "red");

Also, remember that the indexes are zero-based.

Answer 2

Why not browse the (short) selectors page first?

Here it is: the :eq() operator. It is used just like get(), but it returns the jQuery object.

Answer 3

if you have control over the query which builds the jQuery object, use :eq()

$("div:eq(2)")

If you don't have control over it (for example, it's being passed from another function or something), then use .eq()

var $thirdElement = $jqObj.eq(2);

Or if you want a section of them (say, the third, fourth and fifth elements), use .slice()

var $third4th5thElements = $jqObj.slice(2, 5);

Answer 4

I think you can use this

$("ul li:nth-child(2)").append(" - 2nd!");

It finds the second li in each matched ul and notes it.