jQuery .each() returns DOM element and not a jQuery object

Question

I could be misunderstanding what is happening but from what I can tell I am getting a DOM element and not a jQuery object when I use .each().

The below will not work as this refers to a DOM element and not a jQuery object

$("span[id$='_TotalItemCost']").each(function() {
    var someText = this.text();
});

Modified to transform this to a jQuery object and all is well

$("span[id$='_TotalItemCost']").each(function() {
    var someText = $(this).text();
});

Is there something funky with my selector? Is the jQuery .each() documentation wrong and it's not a jQuery object but rather a DOM element returned by .each()?

Vincent Robert · Accepted Answer · 2010-06-08 20:35:56Z

44

The documention is not wrong but you may misunderstand what a jQuery object is.

The jQuery object is returned by the $() function. So $("span[id$='_TotalItemCost']") is one jQuery object which contains every span element selected.

Using .each() will iterate over the elements contained in the jQuery object. This is why this is a DOM node and not a jQuery object.

You did the right thing by using $(this) to use the jQuery methods on this specific element.

answered Jun 8, 2010 at 20:35

Vincent Robert

36.2k15 gold badges84 silver badges122 bronze badges

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

4 Comments

Dan Heberden Over a year ago

Futher, jQuery objects are heavier than the DOM object itself - some of us don't want extra fluff if we're after something simple..

ahsteele Over a year ago

Awesome, just found this tidbit in the documentation which I had missed the callback is fired in the context of the current DOM element, so the keyword this refers to the element.

Mark Graham Over a year ago

$(expression).each(..) does return the jquery instance for chaining. This is probably what the jquery documentation is referring to.

jinglesthula Over a year ago

Right - the distinction between what .each() returns, and what context the callback runs with. Tripped me up at first as well.

RobertPitt · Accepted Answer · 2010-08-16 11:06:05Z

@Vincent Robert, you pretty much summarized it perfectly, but let me just extend that a little.

even though JQuery is a function with prototypes extending its root instance, its acts more like an object.

if you seperate objects from methods/functions and look at them individually you will then understand how the jQuery interface is built.

si think of $() as an object, and think of each() as a method. you initialize an object using the jQuery $() "selector", witch in turn returns an objects that contains only the elemetns / data you selected from the selector $().

this then has methods / functions that you can run directly on the selected content, but methods should not return a jquery object because most of the time there not returning nodes but mere strings or boolean's, so having them wrapped in a jQuery object would be pointless.

as your OP is based around the each function, your not meant to receive a jquery object there because each is not specifically designed for nodes and elements as such

for example, would you want a jquery object here?

$({a:'1',b:'2'}).each(function(){
});

this would be bad right, and pointless, that's why methods do/should not return objects, unless the method is meaning to return a singleton or is specifically designed for object returning.

also, when I say object, im not talking about json objects as such, but method / prototyping objects.

Hope this helps out.

Collectives™ on Stack Overflow

jQuery .each() returns DOM element and not a jQuery object

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related