jquery - 向所有选定的项目添加一些属性，哪一种是正确的方法，为什么？

Question

我正在尝试理解正确的编码方式。

我的 HTML

<div id="foo">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

如果我想为div foo的所有子div添加类bar，我应该使用哪种方式？

选项 1(结果是第三个)

jQuery( '#foo > div' ).addClass( 'bar' );

选项 2(结果是第四快)

jQuery( '#foo' ).children( 'div' ).addClass( 'bar' );

选项 3(结果是最快的)

jQuery( '#foo' ).children( 'div' ).each(function(){
    jQuery( this ).addClass( 'bar' )
});

选项 4(结果非常接近第二)

jQuery( '#foo > div' ).each(function(){
    jQuery( this ).addClass( 'bar' )
});

这些都达到了我想要的效果。我的问题是，

我应该更喜欢使用哪一个？哪些情况应该使用 .each？

使用添加的代码片段进行编辑，显示使用每种方法都比其他方法更好

var t0_start = performance.now();
$('#parent > div').addClass( 'bar' );
var t0_end = performance.now();

var t1_start = performance.now();
$('#parent').children('div').addClass( 'bar' );
var t1_end = performance.now();

var t2_start = performance.now();
$( '#foo > div' ).each(function(){
    $( this ).addClass( 'bar' )
});    
var t2_end = performance.now();

var t3_start = performance.now();
$( '#foo' ).children( 'div' ).each(function(){
    $( this ).addClass( 'bar' )
});    
var t3_end = performance.now();


outcome = 'selector: ' + (t0_end - t0_start);
outcome += "\n";
outcome += 'children(): ' + (t1_end - t1_start)
outcome += "\n";
outcome += 'selector: each(): ' + (t2_end - t2_start)
outcome += "\n";
outcome += 'children(): each(): ' + (t3_end - t3_start)
alert(outcome);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent"><div></div><div></div><div></div></div>

我得到的结果是选择器的时间:each() <children()的时间:each()<选择器的时间:> <选择器的时间: <子项的时间():

Answer 1

更新:性能测试似乎在运行时得到优化并提供了一些奇怪的数字。我已将测试分解为单独的片段(iframe)以获得更一致的数字。

更新2:这是一个jsbin，我试图在其中获得一些见解。选择器方法平均速度更快，但存在重叠。 http://jsbin.com/jiluzu/edit?js,output

更新 3: jsperf.com 已恢复!它进一步支持“选择器”作为更快的方法。 http://jsperf.com/jq-selector-vs-children

原始:在这个特定场景中，我将使用第一个示例。它更加简洁，并且节省了额外的函数调用。此外，现在“选择器”方法的性能也更高。

$('#parent > div');

var start = performance.now();
$('#parent > div');
var end = performance.now();

outcome = "$('#parent > div'): " + (end - start);
$('#parent').append(outcome);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent"><div></div><div></div><div></div></div>

$('#parent').children('div');

var start = performance.now();
$('#parent').children('div');
var end = performance.now();

outcome = "$('#parent').children('div'): " + (end - start);
$('#parent').append(outcome);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent"><div></div><div></div><div></div></div>

$('#foo > div').each()

var start = performance.now();
$('#foo > div').each(function(){});
var end = performance.now();

outcome = "$('#foo > div').each(): " + (end - start);
$('#parent').append(outcome);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent"><div></div><div></div><div></div></div>

$('#foo').children('div').each()

var start = performance.now();
$('#foo').children('div').each(function(){});
var end = performance.now();

outcome = "$('#foo').children('div').each(): " + (end - start);
$('#parent').append(outcome);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent"><div></div><div></div><div></div></div>

<小时/>

何时使用each()

在您想要对每个选定项目进行一些额外操作的情况下，使用 each 非常有用。

例如，如果我们想向每个选定元素的前一个元素添加一个类:

jQuery( '#foo' ).children( 'div' ).each(function(){
    jQuery( this ).addClass( 'bar' );
    jQuery( this ).prev().addClass( 'foo' );
});