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!

nnnnnn · Accepted Answer · 2012-12-08 04:53:20Z

18

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.

answered Dec 8, 2012 at 4:53

nnnnnn

150k30 gold badges210 silver badges247 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Thomas Higginbotham · Accepted Answer · 2012-12-08 04:54:55Z

6

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

answered Dec 8, 2012 at 4:54

Thomas Higginbotham

1,82221 silver badges26 bronze badges

1 Comment

saluce Over a year ago

The first example works, but it's a pretty heavy way to do it. Better to simply use .eq() as in the second example.

Collectives™ on Stack Overflow

jQuery Object array notation

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related