我正在试图理解正确的编码方式.
我的HTML
<div id="foo"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div>
如果我想添加class bar给所有的div foo的孩子div,我应该使用哪种方式？
选项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' )
});
这些都完成了我想要的.我的问题是
我应该更喜欢哪一个使用另一个？我应该使用哪些案例？
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()<选择器的时间：选择器的时间：儿童时间()：
解决方法
更新：perf测试似乎在运行时被优化,并提供了一些奇怪的数字.我将测试分成单独的片段(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>
$( ‘#父’)儿童( ‘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>
$( ‘#富’).子女( ‘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>
何时使用()
使用每个对于您希望对所选择的每个项目进行一些额外的操作的情况都是有帮助的.
例如,如果我们想要添加一个类到每个选定元素的前一个元素：
jQuery( '#foo' ).children( 'div' ).each(function(){
jQuery( this ).addClass( 'bar' );
jQuery( this ).prev().addClass( 'foo' );
});
