Question

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

我的第一直觉是使用$（'parent'）。find（'child'），但结果显然与$（'parent＆gt; child'）不同。

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

Answer 1

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

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

Answer 2

我相信jQuery会首先查询所有'child'元素，然后过滤到'parent'的直接后代。

实际上，这个假设不是相当正确：

只要有可能，jQuery就会使用浏览器的本地querySelectorAll DOM遍历，这种遍历速度最快。

所以，只要：

你没有jQuery specific selector stuff like :first，
您可以安全地假设non-primeval browser，

...使用parent > child时你应该没问题，而不必关心性能。

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

因为：第一个是jQuery扩展而不是CSS规范的一部分，使用的查询：首先不能利用本机DOM querySelectorAll（）方法提供的性能提升。

要在使用时获得最佳性能：首先选择元素，首先使用纯CSS选择器选择元素，然后使用.filter（“：first”）。

Answer 3

$('parent > child')将检索所有第一个发生的孩子的实例。如果div中包含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>

是否有更有效的方式来写$（'parent＆gt; child'）？

3 个答案: