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

Question

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

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

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

Answer 1

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

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

Answer 2

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

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

只要有可能，jQuery 都会使用浏览器的本机 querySelectorAll DOM 遍历，这是尽可能快的。

所以，只要：

• 你不做 jQuery 特定选择器的东西，比如 :first，
• 您可以安全地假设 非primeval browser，

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

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

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

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

Answer 3

$('parent > child') 将检索子项的所有首次出现的实例。如果您的 div 中包含 div，则 $('div#one > div') 将仅返回第二级 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>