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");

比较 of jQuery与我在香草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快！