jQuery 选择器不返回 jQuery 对象答案

【问题标题】：jQuery selector not returning jQuery objectjQuery 选择器不返回 jQuery 对象
【发布时间】：2013-06-13 02:07:47
【问题描述】：

我正在使用 jQuery，但遇到了一些问题。我有一堆具有某个类的 DIV，我正在尝试选择其中的第一个。由于页面布局（长篇大论），我不能使用 first-child 伪类。但是我可以通过将 jQuery 对象视为一个数组来获得相同的效果。我的问题是这不返回一个 jQuery 对象，而是一个普通的 Javascript 对象（特别是一个 HTMLDivElement）。

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

失败是因为返回的对象没有addClass 函数。如果我使用.get(0)，它也会失败。但是，这确实有效。

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

有没有办法做到这一点而不必做双 jQuery 选择器？（并不是说这有什么大不了，但它看起来有点令人困惑。）

【问题讨论】：

你也可以查看.first()api.jquery.com/first

标签： jquery

【解决方案1】：

这就是eq 和first 函数的作用。 eq 通过从 0 开始的索引从选择中获取元素，而 first 只是从选择中获取第一个元素。

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

不过，有趣的是，您实际上已经找到了从另一个选择中获取包含第一个元素的 jQuery 选择的最快方法：

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

这不是一个好方法，因为它很难阅读并且性能优势很小，但它最快！

【讨论】：

这里不太担心速度，只担心可读性。但这至少可以说很有趣。
另外没有提到的是[0] 括号表示法会给你 plain javascript 元素，它会从中剥离 jQuery。如果你不再需要 jQuery 那就太好了！
为什么 JQuery 会这样？它在某些地方返回一个 JQuery 对象，而在其他地方却没有……有什么模式吗？
@MinhNghĩa 它返回一个 jQuery 对象，除非您特别要求本地元素。

【解决方案2】：

[0] 将是一个原始元素。这是正确和理想的行为。如果要保留 jQuery 对象，请使用 $("selector:first") 或 $("selector").first() 或 $("selector").eq(0) 获取包装在 jQuery 对象中的第一个元素。

【讨论】：

一百万个答案，但我最喜欢 first 伪类。谢谢。
@GJK 伪类是最糟糕的方法，因为这意味着 jQuery 必须承担繁重的工作。浏览器本身不理解:first，所以jQuery的选择器引擎必须完成所有的工作。
啊，我不知道 :first 不是原生 CSS 选择器。那时我可能会使用first() 函数。谢谢。
@GJK It's in the pipeline for Selectors Level 4，但还没到。

【解决方案3】：

$.eq 应该可以解决问题：

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

如果您选择一个由多个元素共享的类，将返回一个 jQuery 集合。尝试以数组形式访问该集合将返回一个原始对象，而 $.eq 被设计为返回一个 jQuery 对象以方便您使用。

【讨论】：

【解决方案4】：

试试..

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

或者... first()

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

【讨论】：

【解决方案5】：

当您使用$('#wizard div.collapsible')[0] 时，如您所说，您返回一个普通的 JS 对象，因为它是一个普通的 JS 对象，而不是 jQuery 对象，所以您无法在其上使用 jQuery 方法。您可以使用双选择器或使用$('#wizard div.collapsible')[0].className = "selected";

【讨论】：