jQuery-.children（）。children（）与.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与我拥有的一些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快！