6

When accessing an array, when is it appropriate to use the .eq() function?

For example, I have...

slides.eq(slidesLength-1).css("z-index", (slidesLength-1));

and later I have...

for(i=0; i<slidesLength-1; i++) {
    $(slides[i]).css("left", "-100%");
}

In the first piece of code, the slideshow stops functioning if I don's use the .eq() function. However, the second piece seems to function whether I use the .eq() function or not. Why is this?

Ivan Potosky
  • 91
  • 1
  • 3

3 Answers3

7

slides is not an array. It's a jQuery object. The .eq() method returns you the element at the specified index as a jQuery object.

While jQuery objects may not be arrays, they can pretend to be by having a length property as well as properties corresponding to the indexes. (Since they are not arrays, you can't call methods like .pop(), .forEach(), etc. on them.)

When you do slides[i], you are actually getting the DOM element, not a jQuery object. The $() function turns the DOM element into a jQuery object.

So, when you do slides.eq(1), internally jQuery is doing $(slides[i]).

P.S. Objects, like jQuery objects, that pretend to be arrays are called "array-like objects". If you console.log(slides), it may look like an array. This is just your console trying to make things convenient for you. (See this question for more info: Creating array-like objects in JavaScript)

Community
  • 1
  • 1
gen_Eric
  • 223,194
  • 41
  • 299
  • 337
5

.eq() is a jQuery method which returns a jQuery object, while accessing by index returns plain DOM element. You should use eq() when you want to use jQuery methods (css() in this case) on the returned selection.

The reason $(slides[i]) works is because you're constructing a jQuery object by passing the plain element to $() constructor.

T J
  • 42,762
  • 13
  • 83
  • 138
4

Your slides variable is not an Array, but a jQuery object.

.eq() returns a jQuery object, eventually empty if index is out of bounds, and a negative index is counted from the end.

.get() returns a DOM Element, or undefined if index is out of bounds, and a negative index is counted from the end.

[] returns a DOM Element, or throw an Error if index is out of bounds.

...

Additionally, jQuery methods let you interact with a set of elements as it was alone. So you if you do:

slides.css("left", "-100%");

It is applied on every matched elements contained in the jQuery object. It is unnecessary to loop over them.

...

Also the preferred way to loop over matched elements is using the each() method:

slides.each(function (i, el) {
    var $el = $(el);
});

...

Also it is an established convention to prefix jQuery variables with a $ sign; it let you to easily differentiate DOM elements from jQuery objects. But that's only a matter of taste.

Lionel Gaillard
  • 3,023
  • 1
  • 21
  • 20
  • Good answer... I forgot about the `.get()` method! – gen_Eric Dec 22 '15 at 16:11
  • Note: If you call `.get()` without a parameter on a jQuery object, you will be returned an [actual] array (of DOM elements or whatever was in the jQuery object). – gen_Eric Dec 22 '15 at 16:11
  • Thanks for the thorough response. I'll be sure to integrate your answer into my code. – Ivan Potosky Dec 22 '15 at 16:40
  • Ok, right now I'm using a for loop and you're suggesting using the .each() function. Can the .each() function target all but one element contained within my jQuery object? – Ivan Potosky Dec 22 '15 at 18:10