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 t

Answer 1

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();

Answer 2

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.