jQuery 的最后返回究竟是啥？

Posted 2023-02-22

【中文标题】jQuery 的最后返回究竟是啥？

【英文标题】：What exactly does jQuery's last return?jQuery 的最后返回究竟是什么？

【发布时间】：2011-09-29 17:40:38

【问题描述】：

我不得不将 javascript 和 jQuery 混合在一起，直到我可以进行适当的重写。看来下面的代码是不等价的：

    var something = $(".image:last"); // Last element with image class?

    var element = document.getElementById("slideshow"); // html UL with images as children
    var lastChild = element.lastChild;

jQuery 究竟返回了什么？

P.S：我可能对实际归因有误。如果是这种情况，请道歉。我对 jQuery 很陌生。

【问题讨论】：

没有相关代码，无法判断它是否等效。实际上，“something”是“image”类的最后一个元素，而“lastChild”是“slideshow”容器的最后一个子元素。

【参考方案1】：

我相信所有的 jQuery 选择器都会返回一个 jquery 对象——而不是一个元素。

我认为如果您选择 jquery 对象中的第一项，您将收到实际的元素，所以：

var something = $(".image:last")[0]

将是您所追求的元素。

【参考方案2】：

jQuery 返回一个 jQuery 对象。在这种情况下，该对象代表页面上的一个元素，但它包含大量额外功能，这些功能在 jQuery 文档页面上进行了记录：http://docs.jquery.com/Main_Page。

我喜欢把 jQuery 的 $() 函数想象成一种超级英雄的斗篷。将斗篷包裹在页面上的一个元素上，它会获得一堆超能力。

尝试使用 Firebug 之类的工具来检查您的对象，它会以一种更有意义的方式显示它们。

【参考方案3】：

jQuery 将返回一个 jQuery 对象，这就是它们不同的原因。

因此，两者：

$(".image:last") == $(lastChild)

和：

$(".image:last")[0] == lastChild

当然，假设您在同一个元素上运行这些选择，会给您相同的结果。

一般来说，$(".image:last") 会找到所有具有 image 类的元素，然后返回它找到的最后一个元素，并包装在一个 jQuery 对象中。

请注意，它们在技术上并不等同：( == ) 在 JavaScript 中为 false。 （感谢@lonesomeday 的评论提醒我）。

第一个将lastChild 包装在一个 jQuery 对象中，第二个从 jQuery 对象中获取实际元素。

【讨论】：

不，他们不会。 :last 没有得到最后一个孩子，甚至 === 也是假的——即使对象具有完全相同的属性，它们也不相等。

@lonesomeday 非常感谢，编辑了我的帖子，试图稍微澄清一下。

【参考方案4】：

$('.image:last')

这告诉 jQuery 获取类 image 的所有元素，然后获取最后一个。将返回一个 jQuery 选择（自定义对象）；该元素将是选择的唯一成员。

请注意，这将返回最后一个 .image 元素。

var element = document.getElementById("slideshow");
var lastChild = element.lastChild;

获取id为slideshow的元素，然后返回最后一个子节点。注意两件事：它返回一个子节点（而 jQuery 找到了匹配选择器的最后一个元素），它返回一个节点。元素是一种节点，但 text 和 cmets 也是节点。如果元素末尾有空格，那将是lastChild，而不是最后一个子元素。

也许如果您能澄清您要更改的确切代码，我可以更具体地说明您需要做什么。

【参考方案5】：

这在很大程度上取决于实际的 DOM，这两种方法是否选择相同的元素。

$(".image") 将选择所有具有类.image 的DOM 元素（在整个页面中）。 :last 将为您提供集合中的最后一个元素，并将其返回包装在一个 jQuery 对象中。

另一方面：

var element = document.getElementById("slideshow");
var lastChild = element.lastChild;

将只选择#slideshow 的最后一个孩子（可能与$(".image:last")[0] 等效，也可能不等效）。这会返回一个 DOM node，不一定是 DOM element。

例如这里

<div id="slideshow">
<br />
</div>

lastChild 是一个包含换行符的文本节点。

---

所以要记住的事情是：

#slideshow 可能不包含类 .image 的所有元素（您可以使用 $('#slideshow .image') 在 jQuery 中限制搜索。

element.lastChild 可能返回 文本节点 而不是元素节点。你可以遍历之前的兄弟姐妹，直到找到一个元素节点，例如：

var lastChild = element.lastChild;
while(lastChild.nodeType !== 1 && (lastChild = lastChild.previousSibling));

if(lastChild) 
    // last element node found