jquery - 我应该使用 .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 的传统作用域行为之间如何解析相对选择器方面存在不同意见。]