Javascript 如何匹配单个子代（如$.find（）），而不在它之后搜索DOM树的其余部分'；找到了什么？

我使用的是JQuery和JQuery mobile，不幸的是，我需要大量使用$.find（）方法来搜索元素的所有后代

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

---

是否有任何方法可以执行像$.find（）这样的完整子代搜索，在识别第一个匹配项后停止搜索？

只要使选择器足够具体，并使用第一种方法即可

$('yourselector').first()

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

请记住，CSS搜索是按照选择器指定的顺序从“右到左”执行的，因此它实际停止的速度比您想象的要快

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

可以使用.first（）吗

---

这取决于您的选择器是什么。除非您使用的是jquery特定的选择器或选择器，如

.someclass

、

#someid

或

div

，否则jquery会将选择器直接传递给

元素。queryselectoral（）

，后者使用浏览器的选择器引擎来完成工作。因此，jquery并没有迭代所有元素，这意味着当它找到第一个元素时，无法让它“停止”，它将找到所有元素，然后将它们全部提供给您。您可以改为使用

element.querySelector（）

并跳过jQuery，让浏览器只返回第一个匹配项，但这是否会显著加快，将取决于浏览器如何实现这些方法。（仅仅因为不使用jQuery，它总是会稍微快一点，但从jsperf来看，使用

querySelector

通常比使用

querySelectorAll

更快）

现在，当涉及到包含只包含jQuery选择器的选择器时，只需从

中省略那些只包含jQuery的选择器。查找

，而是在

中使用它们。筛选

，以便首先使用效率更高的

元素。queryselectoral（）

，然后通过只包含jQuery的选择器只过滤结果

例如，

.find（“.foo:button”）

将更有效地写成

.find（.foo”）.filter（“:button”）

jQuery没有在jsperf中使用，但是由于jQuery选择元素的方式在很大程度上依赖于jsperf中使用的相同方法，因此我认为它是相关的。例如，通过id选择的jQuery选择器与通过类选择的jQuery选择器应该看到与

getElementById

和

getElementsByClassName

之间相同的性能差异

同时，

---

当前有一个功能请求打开，该方法将自动为您进行此切换：它被挂起，因为它似乎没有实际导致性能显著提高。

是，请使用document.querySelector而不是jQuery来选择元素。它使用相同的css选择器语法（减去一些只支持jQuery的功能），只返回找到的第一个。它是否真正在第一次停止将取决于使用的浏览器如何实现它。此外，jQuery实际上不会迭代所有子体，除非您的选择器只能以这种方式选择（例如，如果您使用的jQuery选择器未在css中实现）。否则，jQuery将使用document.querySelector，它使用浏览器的css选择器引擎。要加快元素搜索速度，您需要对正在搜索的DOM结构有一些直观的了解。如果您可以做出这样的假设，

a

元素始终是

b

元素的子元素，那么您可以使用

.children（）

/

.children（）

/

.children（）

.next（）/etc。。。在一个更集中的范围内搜索元素。@KevinB-这将有助于回答这个问题，并举例说明它是如何工作的。一个jsperf也会非常棒，以显示速度上的差异：首先是一个jquery扩展-它实际上并没有停止搜索。请阅读本文中的注释，仍然选择所有“标记”元素，然后只从顶部拾取一个。

$('tag').first()