有没有更有效的方法来编写 $('parent > child')？

Posted 2023-03-05

【中文标题】有没有更有效的方法来编写 $(\'parent > child\')？

【英文标题】：Is there a more efficient way to write $('parent > child')?有没有更有效的方法来编写 $('parent > child')？

【发布时间】：2011-12-15 09:23:05

【问题描述】：

鉴于以下选择器 $('parent > child')，我相信 jQuery 将首先查询所有 'child' 元素，然后过滤到那些是 'parent' 的直接后代的元素。这可能非常低效。

我的第一直觉是使用$('parent').find('child')，但是结果显然和$('parent > child')不一样。

有没有更好的方法来编写这个选择器？

【问题讨论】：

"我相信 jQuery 会先查询所有的 'child' 元素，然后再过滤到那些是 'parent' 的直接后代的元素。" - 我很想知道是否jQuery 做到了...

@ŠimeVidas 我几个月前从这里得到它：net.tutsplus.com/tutorials/javascript-ajax/…

【参考方案1】：

jQuery 有一个 .children() 方法，它只选择直接子级。

另外，不要担心这些东西！除非你有一个巨大的应用程序或者出于好奇，否则没有理由深入研究这个。如果您经常使用选择器方式，只需“缓存”它：$tabs = $('.tabs')。一个好的做法是在代表选择器的变量前面使用 $。

【讨论】：

我没有意识到 children() 方法只有直接的孩子。是的，这主要是出于好奇。我总是缓存我的选择器，但是这个特殊的问题一直困扰着我一段时间。感谢您的快速回复。

【参考方案2】：

我相信 jQuery 会首先查询所有“子”元素，然后再过滤到“父”的直接后代元素。

实际上，这个假设并不完全正确：

只要有可能，jQuery 就会使用浏览器的原生 querySelectorAll DOM 遍历，它的速度是最快的。

所以，只要：

你不要jQuery specific selector stuff like :first， 您可以放心地假设non-primeval browser，

…您应该可以使用parent > child 而不必关心性能。

如果您碰巧需要任何 jQuery 特定的选择器，请记住这一点：

因为 :first 是 jQuery 扩展而不是 CSS 规范的一部分，所以使用 :first 的查询无法利用原生 DOM querySelectorAll() 方法提供的性能提升。

为了在使用 :first 选择元素时获得最佳性能，首先使用纯 CSS 选择器选择元素，然后使用 .filter(":first")。

【讨论】：

嘿。感谢您的回复。查看以下链接中的第一段，这是我的假设基础：net.tutsplus.com/tutorials/javascript-ajax/…

【参考方案3】：

$('parent > child') 将检索所有第一次出现的子实例。如果您有一个 div 中包含 div 的 div，$('div#one > div') 将只返回 2 级 div，而不是所有子级。就效率而言，我认为这没有任何问题。不过，Radagaisus 的建议同样有效。

<div id="one">
  <div> <!-- returned -->
    <div></div> <!-- ignored -->
    <div></div> <!-- ignored -->
    <div></div> <!-- ignored --> 
  </div>
  <div> <!-- returned -->
    <div></div> <!-- ignored -->
    <div></div> <!-- ignored -->
    <div></div> <!-- ignored --> 
  </div>
</div>