为所有选定的项添加一些属性，哪一个是正确的方法，为什么？

Question

我想了解正确的编码方式。

我的HTML

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

如果我想将课程bar添加到div foo的所有子div中，我应该使用哪种方式？

选项1 （原来是第3名）

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

选项2 （原来排名第四）

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

选项3 （结果最快）

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

选项4 （结果非常接近第2位）

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

这些都完成了我想要的。我的问题是，

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

使用添加的代码段进行编辑，其中显示使用每个代码更好于其他方法

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

我得到的结果是选择器的时间：每个（）＆lt; 儿童时间（）：每个（）＆lt; 选择器的时间：＆lt; 选择器的时间：＆lt; 儿童时间（）：

Answer 1

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

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

更新3： jsperf.com正在备份！它进一步支持“选择器”作为更快的方法。 http://jsperf.com/jq-selector-vs-children

ORIGINAL：在这个特殊情况下，我会使用第一个例子。它更简洁，为您节省了额外的函数调用。此外，现在“选择器”方法也更具性能。

$（'＃parent＆gt; 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>

。

<强> $（ '＃父'）的儿童（ '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＆gt; 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>

<强> $（ '＃富'）。儿童（ 'DIV'）。每个（）

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非常有用。

例如，如果我们想要在每个选定元素的前一个元素中另外添加一个类：

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

Answer 2

使用jQuery，选项2和3可能非常相似，除了each()之外，您可以使用函数在选择中为每个元素执行多个操作。

选项1是旧版浏览器中效率最低的，如IE8，Chrome 5，Opera 9及旧版本的jQuery 。这是因为在进行实际选择之前必须解析CSS选择器，这基本上只是调用选项2。

  

为什么你永远不应该使用CSS文本选择器

     

$("#parent > .child");和$("#parent .child");都需要解析选择器，然后分别致电：$('#parent').children().filter('.child')和$('#parent').filter('.child')。

更多信息，包括旧版浏览器的基准，here（自2010年起）。

以上是现代浏览器和jQuery的旧消息。 CSS选择器现在更快。

Answer 3

你可以选择第二种选择，因为我们可以做到全面的代码是好的。

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

O/p: <div id="foo">
       <div class="bar"></div>
       <div class="bar"></div>
       <div class="bar"></div>
       <div class="bar"></div>
       <div class="bar"></div>
       <div class="bar"></div>
       <div class="bar"></div>
       <div class="bar"></div>
    </div>