jQuery的.each()返回DOM元素而不是一个jQuery对象。

Question

我可能误解了发生的情况，但据我所知，在使用.each()时，我得到了一个DOM元素而不是jQuery对象。

以下代码将无法工作，因为this指的是DOM元素而不是jQuery对象。

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

修改后将 this 转换为 jQuery 对象，一切正常

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

我的选择器有什么问题吗？jQuery中的.each()文档是否有误，它返回的不是jQuery对象而是由.each()返回的DOM元素？

- ahsteele

Answer 1

文档并没有错，但您可能误解了jQuery对象的含义。

jQuery对象是由$()函数返回的。因此，$("span[id$='_TotalItemCost']")是一个包含每个选定的span元素的jQuery对象。

使用.each()将遍历包含在jQuery对象中的元素。这就是为什么这是一个DOM节点而不是一个jQuery对象。

您通过使用$(this)在特定元素上使用jQuery方法做得对。

- Vincent Robert

---

此外，jQuery 对象比 DOM 对象本身更重 - 如果我们只需要简单的东西，有些人就不想要额外的废话。 - Dan Heberden

太棒了，刚在文档中发现了这个小贴士，我之前错过了它。回调函数在当前DOM元素的上下文中触发，因此关键字“this”指的是该元素。 - ahsteele

$(expression).each(..) 返回 jQuery 实例以进行链式操作。这可能是 jQuery 文档所指的内容。 - Mark Graham

没错 - .each() 返回值和回调函数运行的上下文之间的区别。这也曾经让我困惑过。 - jinglesthula

Answer 2

@Vincent Robert，你的总结已经非常完美了，但让我再详细解释一下。

虽然JQuery是一个带有原型扩展的函数，但它更像一个对象。

如果你把对象和方法/函数分开看，你就会明白jQuery接口是如何构建的。

所以把$()看作一个对象，each()看作一个方法。使用jQuery的$() "选择器"初始化一个对象，它将返回一个仅包含您从选择器$()中选择的元素/数据的对象。

这个对象具有可以直接在选定内容上运行的方法/函数，但方法不应该返回一个jQuery对象，因为大多数时候它们并没有返回节点，而只是字符串或布尔值，因此将它们包装在jQuery对象中是没有意义的。

由于您的OP是基于each函数的，因此您不应该在那里收到一个jQuery对象，因为each并没有专门设计用于节点和元素等。

例如，你想在这里使用一个jQuery对象吗？

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

这样做不好，也没有意义，因此除非方法旨在返回单例或专门设计用于对象返回，否则方法不应该返回对象。

此外，当我说对象时，我并不是指 JSON 对象，而是指方法/原型对象。

希望这有所帮助。

- RobertPitt