我应该使用.find（“。foo .bar”）还是.children（“。foo”）。children（“。bar”）？

Question

当使用jQuery进行DOM遍历时，这两者都会返回相同的结果（我相信）：

$("whatever").find(".foo .bar")
$("whatever").children(".foo").children(".bar")

哪个更适合使用？

Answer 1

它们不等同，我将在下面解释，但是如果调整它们以匹配，.children()表示速度，.find()为了简洁（Sizzle内部的额外工作，为初学者解析这个），你决定哪个更重要。

第一个有不同的结果，但如果你知道他们是孩子，你可以这样做：

$("whatever").find("> .foo > .bar")
//equal to...
$("whatever").children(".foo").children(".bar")

这个等同于你的第二个功能。目前，您可以找到第一个：

<whatever>
  <div class="foo">
    <span>
     <b class="bar">Found me!</b>
    </span>
  </div>
</whatever>

第二个不会，它要求.foo成为whatever的直接孩子而.bar是直接孩子其中，只要.find(".foo .bar")的后代中有.bar，.foo就可以让它们处于任何级别。

Answer 2

可替换地：

$('whatever .foo .bar')

（或>.foo>.bar如果你只想要直接的孩子。）

只要whatever是标准的CSS3选择器（不使用任何特定于Sizzle的扩展程序），就像上面这样的单个文档相关选择器将在现代浏览器上传递给document.querySelectorAll ，这将比Sizzle的手动树行走快得多。

[虽然理论上应该可以使用element.querySelectorAll快速查询$(...).find(...)形式，但jQuery目前不会使用此方法，因为对于如何解析相对选择器存在意见分歧在Selectors-API标准和jQuery的传统范围行为之间。]