jQuery selector not returning jQuery object

Question

I'm working with jQuery and I have a bit of an issue. I have a bunch of DIVs with a certain class, the first of which I'm trying to select. I can't use the first-child pseudo class because of the page layout (long story). But I can get the same effect by treating the jQuery object as an array. My problem is that this does not return a jQuery object but rather a plain Javascript object (specifically a HTMLDivElement).

$("#wizard div.collapsible")[0].addClass("selected");

That fails because the object returned doesn't have an addClass function. It also fails if I use .get(0). However, this does work.

$($("#wizard div.collapsible")[0]).addClass("selected");

Is there a way to do this without have to do the double jQuery selector? (Not that it's a big deal, but it looks kind of confusing.)

You can also check out .first() api.jquery.com/first

Matthew Blancarte
– Matthew Blancarte

2013-06-12 17:54:36 +00:00
Commented Jun 12, 2013 at 17:54 — Matthew Blancarte
– Matthew Blancarte, Commented Jun 12, 2013 at 17:54

lonesomeday · Accepted Answer · 2013-06-12 17:52:29Z

9

This is what the eq and first functions do. eq obtains an element from a selection by a 0-based index, while first just gets the first element from a selection.

$("#wizard div.collapsible").eq(0).addClass("selected");
$("#wizard div.collapsible").first().addClass("selected");

Interestingly, though, you've actually hit on the fastest way to get a jQuery selection containing the first element from another selection:

$($("#wizard div.collapsible")[0]).addClass("selected");

It's not a great way to do it, because it's so hard to read and the performance benefits are minimal, but it is fastest!

answered Jun 12, 2013 at 17:52

lonesomeday

239k54 gold badges330 silver badges329 bronze badges

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

4 Comments

GJK Over a year ago

Not too worried about speed here, just readability. But that's interesting to say the least.

Mark Pieszak - Trilon.io Over a year ago

Also not mentioned is that [0] bracket notation will give you the plain javascript element, which strips the jQuery from it. Great if you don't need jQuery on it anymore!

Minh Nghĩa Over a year ago

Why does JQuery behave this way? It returns a JQuery object at some places, it does not at the other places... Is there any pattern?

lonesomeday Over a year ago

@MinhNghĩa It returns a jQuery object unless you specifically ask for the native element(s).

user229044 · Accepted Answer · 2013-06-12 18:07:47Z

2

[0] will be a raw element. That's correct and desired behaviour. If you want to retain the jQuery object, use $("selector:first") or $("selector").first() or $("selector").eq(0) to get the first element wrapped in a jQuery object.

edited Jun 12, 2013 at 18:07

answered Jun 12, 2013 at 17:51

user229044♦

241k41 gold badges347 silver badges350 bronze badges

4 Comments

GJK Over a year ago

A million answers, but I like the first pseudo class the best. Thank you.

lonesomeday Over a year ago

@GJK The pseudo-class is the worst way to go, because it means jQuery has to do the heavy lifting. Browsers don't natively understand :first, so jQuery's selector engine has to do all the work.

GJK Over a year ago

Ahh, I wasn't aware that :first wasn't a native CSS selector. I'll probably go with the first() function then. Thank you.

lonesomeday Over a year ago

@GJK It's in the pipeline for Selectors Level 4, but it's not here yet.

Elliot Bonneville · Accepted Answer · 2013-06-12 17:52:02Z

0

$.eq should do the trick:

$("#wizard div.collapsible").eq(0).addClass("selected");

If you select a class shared by more than one element, a jQuery collection will be returned. Attempting to access that collection as an array will return a raw object, whereas $.eq has been designed to return a jQuery object for your convenience.

answered Jun 12, 2013 at 17:52

Elliot Bonneville

53.6k23 gold badges101 silver badges125 bronze badges

Comments

Kylie · Accepted Answer · 2013-06-12 17:52:15Z

0

Try..

$("#wizard div.collapsible").eq(0).addClass("selected");

Or... first()

$("#wizard div.collapsible").first().addClass("selected");

answered Jun 12, 2013 at 17:52

Kylie

11.8k11 gold badges51 silver badges81 bronze badges

Comments

ayyp · Accepted Answer · 2013-06-12 17:52:38Z

0

When you use $('#wizard div.collapsible')[0] you return a plain JS object as you said, since it's a plain JS object, and not a jQuery object, you're unable to use jQuery methods on it. You could either use the double selector or use $('#wizard div.collapsible')[0].className = "selected";

answered Jun 12, 2013 at 17:52

ayyp

6,5984 gold badges35 silver badges47 bronze badges

Collectives™ on Stack Overflow

jQuery selector not returning jQuery object

5 Answers 5

4 Comments

4 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

4 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related