[javascript] JQuery element in a set

Whenever you want a single element from a jQuery result set, there are a few ways to do this. There are some differences though which may be confusing at first.

Let's assume we have a list with four elements:

<ul>
    <li id="one">one</li>
    <li id="two">two</li>
    <li id="three">three</li>
    <li id="four">four</li>
</ul>

You probably never want to put an id on each element, but it's just an example here.

Now let's say you want to find out the id of the third li element, there are a few ways to achieve this.

Using the eq(position) function

Using eq() reduces the set of matched elements to a single element. Important to know is that 'element' means a jQuery object, which means you can still use all jQuery functions on it.

$('li').eq(2).attr('id');

This would return the third element's id using jQuery's attr() method. Note we use '2' and not '3' because the position starts at zero.

http://docs.jquery.com/Core/eq

Using the :eq(index) selector

Using :eq matches a single element by its (zero-based) index. Used in the jQuery function, this is the same as using eq(). It will still return a jQuery object on which you can use all functions.

$('li:eq(2)').attr('id');

I have no idea if this would be faster than using eq(). Anyone?

http://docs.jquery.com/Selectors/eq

Using the get(index) function

Get(index) would access the specific element in the result set based on its index. Note the important difference that get(index) does not return a jQuery object, but rather an actual DOM element. This means you can not use any jQuery methods directly on it. So this won't work:

$('li').get(2).attr('id'); // this won't work

You can get to the id though by accessing the element's id as you would in the normal DOM:

$('li').get(2).id; // works

There's an alternative syntax for get(index), which is using the square bracket notation on the jQuery object itself, so the next would work as well:

$('li')[2].id; // $('li')[2] is the same as $('li').get(2)

http://docs.jquery.com/Core/get#index

Conclusion

I know, all these differences may be obvious, but could be confusing for people new to jQuery. Whatever solution you eventually use, will depend on what else you will be doing with your result set.

I tend to think that using get(index) in this case would be the better one given that you can access the DOM element and its id easily without the need of running extra functions.

Let me know your thoughts.