如何匹配单个后代(如 $.find(）），而无需在找到 DOM 树的其余部分后对其进行搜索

How do I match a single descendent (like $.find()) without searching through the rest of the DOM tree after it's found?

本文关键字：余部 搜索 DOM 后代 单个 何匹配 find      更新时间：2023-09-26

我正在使用JQuery和JQuery移动版，不幸的是，我需要使用$.find（）方法来搜索元素的所有后代。

很多时候，我知道只会有一个结果。但是，在找到可能是非常早期的匹配项后，查找方法将继续遍历整个树。您的第一个想法可能是我应该导航到我期望元素的位置，但对于我的某些查询来说，这确实是不可能的。

有没有办法进行完整的后代搜索，例如 $.find（） 在识别第一个匹配项后停止搜索？

这取决于您的选择器是什么。除非你使用的是 jquery 特定的选择器或选择器，如 .someclass、#someid 或 div，否则 jquery 会将选择器直接传递给使用浏览器选择器引擎来完成工作的element.querySelectorAll()。因此，jquery 不会遍历所有元素，这意味着当它找到第一个元素时，没有办法让它"停止"，它会找到所有元素然后给你所有元素。你可以改用element.querySelector()并跳过jQuery，让浏览器只返回第一个匹配项，但这是否明显更快将取决于浏览器如何实现这些方法。（仅仅由于不使用jQuery，它总是会更快一些，但是从jsperf来看，使用querySelector通常比使用querySelectorAll更快）

现在，当涉及到包含仅jQuery选择器的选择器时，只需从.find中省略这些仅jquery选择器，而是在.filter中使用它们，以便您首先使用更高效的element.querySelectorAll()，然后仅通过jQuery选择器过滤结果。

例如，.find(".foo:button")可以更有效地编写为.find(".foo").filter(":button")

https://developer.mozilla.org/en-US/docs/Web/API/element.querySelector

http://jsperf.com/queryselectorall-vs-getelementbyid/35

jQuery没有在jsperf中使用，但是由于jQuery选择元素的方式在很大程度上依赖于jsperf中使用的相同方法，我认为它是相关的。 例如，按 id 选择的 jQuery 选择器与按类选择的 jQuery 选择器应该看到与 getElementById 和 getElementsByClassName 之间相同的性能差异。

也
当前有一个功能请求，用于自动为您进行此切换的方法：http://bugs.jquery.com/ticket/11785 它被搁置，因为它似乎实际上并没有导致性能显着提高。

你能用.first（）吗？

$('tag').first()

http://api.jquery.com/first/

只需使您的选择器足够具体，然后使用第一种方法。

$('yourselector').first()

或者，如果您已经知道结果最多是一个，那么您实际上可以使用 ID 或有点独特的类在 dom 中装饰这个特殊元素。

请记住，CSS 搜索是按照选择器指定的顺序从"右到左"执行的，因此它实际上会比您想象的更快停止。

这完全取决于您的CSS选择器的具体程度。

相关文章：