我應該使用.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的傳統範圍行爲。]