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

Question

当使用jQuery的DOM遍历这两个返回相同的结果（我相信）：

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

而最好用？

Answer 1

他们是不等价的，因为我会在下面解释，但如果对其进行调整，以匹配，.children()速度，.find()为了简洁（额外的工作里面灒，解析这对于初学者），您可以决定哪个更重要。

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

$("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选择器，像上面这样的单个文档相关选择器将在现代浏览器上传递到document.querySelectorAll，这将比Sizzle的手动树行走快得多。

[虽然从理论上讲，应该可以使用element.querySelectorAll使窗体的查询$(...).find(...)快，目前的jQuery不会随选择如何相对于选择器API标准之间得到解决使用的，因为不同的意见这个方法， jQuery的传统范围行为。]