我应该使用.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")允许它们是任何级别的深度，只要<代码>d13的子代中的.bar。

Answer 2

或者：

$('whatever .foo .bar')

(如果您只想要直接的子级，则使用>.foo>.bar。)

只要whatever是一个标准的CSS3选择器(不使用任何特定于Sizzle的扩展)，就会在现代浏览器上将类似上面的单个文档相对选择器传递给document.querySelectorAll，这将比Sizzle的手动树遍历快得多。

虽然在理论上应该可以使用element.querySelectorAll来快速地进行$(...).find(...)形式的查询，但jQuery目前不会使用这种方法，因为在选择器-API标准和jQuery的传统作用域行为之间，对如何解析相对选择器的看法存在分歧。