Define jQuery "eq"

Question

I am having a difficult time wrapping my head around the jQuery eq. Can someone explain its use to me? What and how does it index?

thanks.

Answer 1

With this HTML:

<ul>
    <li>Mario</li>
    <li>Luigi</li>
    <li>Princess</li>
    <li>Toad</li>
</ul>

And this JavaScript:

alert($("ul li").eq(0).text()); // Mario
alert($("ul li").eq(1).text()); // Luigi
alert($("ul li").eq(2).text()); // Princess
alert($("ul li").eq(3).text()); // Toad

Answer 2

.eq(i) returns an element from a collection at a specified index i.

In the example from the link you posted:

$("p").eq(1).css("color", "red")

It basically says: "Find all elements that match $("p") then take the 2nd one and change its color to red."

$("p") matches all <p> elements in your document. You now have a collection of those.

$("p").eq(1) reduces this collection to the 2nd element only.

the .css("color", "red") part simply operates on that element to change its color to red.

Answer 3

have a look at the example from docs:

$("p").eq(1).css("color", "red")

$("p")                selects all paragraphs in your document
.eq(1)                selects the second element only
.css("color", "red")  applies css rule to the selected element

Answer 4

It sounds like you might be getting caught up on the word 'index'.

In this case, 'index' refers to a specific item in a collection of items. So eq will give you access to a single item within a matched set of elements.

Answer 5

To understand how eq() works, I think it helps to understand how $() works in jQuery. When you specify

$([selector],[context])

//which is the same as

$([context]).find([selector])

what gets returned is a jQuery object (sometimes referred to as a wrapped set) which, amongst other properties, has a property starting with 0 and incrementing by 1 for each element that matches the selector. A length property is also set, which is why the matched elements of a jQuery object can be iterated over like an array (using a for loop or commands such as each([callback])).

Let's now have a look at the source for eq()

 eq: function( i ) {
  return this.slice( i, +i + 1 );
 },

we see that eq() is achieved using the slice() command of the jQuery object, so let's also have a look at that

 slice: function() {
  return this.pushStack( Array.prototype.slice.apply( this, arguments ),
   "slice", Array.prototype.slice.call(arguments).join(",") );
 },

and also need to look at pushStack(), a command used quite a bit internally

 // Take an array of elements and push it onto the stack
 // (returning the new matched element set)
 pushStack: function( elems, name, selector ) {
  // Build a new jQuery matched element set
  var ret = jQuery( elems );

  // Add the old object onto the stack (as a reference)
  ret.prevObject = this;

  ret.context = this.context;

  if ( name === "find" )
   ret.selector = this.selector + (this.selector ? " " : "") + selector;
  else if ( name )
   ret.selector = this.selector + "." + name + "(" + selector + ")";

  // Return the newly-formed element set
  return ret;
 },

we can see that pushStack takes an array and returns a new jQuery object. The elements that form the matched elements of the new jQuery object are obtained by calling Function.apply on the JavaScript Array slice function and passing the arguments of the jQuery slice function in as the argsArray.

The get() command on the other hand is more straightforward. Let's have a look at the source

 // Get the Nth element in the matched element set OR
 // Get the whole matched element set as a clean array
 get: function( num ) {
  return num === undefined ?

   // Return a 'clean' array
   Array.prototype.slice.call( this ) :

   // Return just the object
   this[ num ];
 }

called without an argument for the num parameter, the jQuery object is converted to an array, using Function.call on the JavaScript Array slice function. If num is defined, then the value held in the corresponding property of the jQuery object is returned, much the same as the following

$([selector]).get(0)

//is the same as

$([selector])[0]