Select element by index (multiple elements of same class)

Question

Is there a way to select a element by index with Javascript or jQuery? For instance:

<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>

Under jQuery I could get the length as 4, now is there a way to select and then manipulate a element of "div.item" based on its index number?

Answer 1

http://api.jquery.com/eq/

$("div.item").eq(0) will give you the first element.

Answer 2

You could use the .eq() selector for this job:

var element = $('div.item:eq(3)');

Answer 3

$('div.item:eq(4)');

this code will select the 4th div with .item class

Answer 4

$('div.item:eq(3)') or $("div.item").eq(3) or $("div.item").get(3)

If you are talking about getting the "element", the third option returns the DOM element, versus the first two that return the jQuery object containing the DOM element.

The first two are very similar. The difference is that the first one puts "eq" inside the query so you can only manipulate that single element. If you use the second one, you can do something like $("div.item").css('background','red').eq(3).css('background','blue') which cannot be done so easily using the other two methods.