jQuery Object array notation

Question

I'm new to jQuery, and I'm having a little trouble understanding its array notation for objects. Reading the jQuery docs and this article, it seems that you can refer to the nth item in an object returned by a selector by doing something like

$('.foo')[n];

Correct? Should I be able to use jQuery manipulation/effects functions in tandem? Something like (this isn't working for me)

$('.foo')[0].hide();

I've also tried, to no avail:

var arr = $('.foo').get();
arr[0].hide();

Is there something wrong in my syntax? What's the best way to do what I'm trying to do here?

Thanks!

Answer 1

The [0] array notation and the .get() method both return a reference to a DOM element within the jQuery object, and you can't use jQuery methods on DOM elements.

Try the eq() method instead, because it returns a new jQuery object:

$('.foo').eq(0).hide();

Note also that having used the array notation or .get() to get a reference to a DOM element means you can then get direct access to the DOM element's properties, e.g.:

var firstElId = $('.foo')[0].id;

...with a second note that $('.foo')[0] will be undefined and $('.foo')[0].id will give an error if there are no elements matching the '.foo' selector.

Answer 2

When you reference a jQuery object as an array you get a DOM element back. You'll need to convert it back to a jQuery object to use methods like .hide()

var bar = $('.foo')[n];
var $bar = $(bar);

$bar.hide();

Or just use jQuery's eq() method:

var bar = $('.foo').eq(n);
bar.hide();