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

Answer 1

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.

Answer 2

@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.