Jquery - .children（）。children（）vs .find（）

Question

我有一個場景，我知道我正在尋找的div完全是兩層。

它是更有效地使用：

$('#mydiv').find('.myselector') 

或

$('#mydiv').children().children('.myselector') 

Answer 1

使用您的控制檯進行檢查。首先檢查你的第一個建議：

console.time('benchmark'); 
for (var i=0; i<1000; i++) { 
    var $elem = $('#mydiv').find('.myselector'); 
} 
console.timeEnd('benchmark'); 

現在做同樣的你的第二個建議：

console.time('benchmark'); 
for (var i=0; i<1000; i++) { 
    var $elem = $('#mydiv').children().children('.myselector'); 
} 
console.timeEnd('benchmark'); 

運行兩個版本幾次真正檢查是否有顯著差異。使用這種測試方法來優化您的選擇器。

Answer 2

試試這個：

var elems = document.getElementById('mydiv').querySelectorAll(".myselector"); 

的jQuery A comparison與幾個Vanilla JS想法，我有。

---

編輯：對於IE7支持：

var container = document.getElementById('mydiv'), elems = [], 
    firstlevel = container.children, l = firstlevel.length, 
    secondlevel, m, i, j; 
for(i=0; i<l; i++) { 
    secondlevel = firstlevel[i].children; 
    m = secondlevel.length; 
    for(j=0; j<m; j++) { 
     if(secondlevel[j].className.match(/\bmyselector\b/)) { 
      elems.push(secondlevel[j]); 
     } 
    } 
} 

...是啊，不漂亮！但仍然比jQuery更快！