请记住 – jQuery只是JavaScript。不要以为它有能力来补偿你糟糕的代码。
each
方法。[code=”javascript”]
// jQuery’s each method source
each: function( object, callback, args ) {
var name, i = 0,
length = object.length,
isObj = length === undefined || jQuery.isFunction(object);
if ( args ) {
if ( isObj ) {
for ( name in object ) {
if ( callback.apply( object[ name ], args ) === false ) {
break;
}
}
} else {
for ( ; i < length; ) {
if ( callback.apply( object[ i++ ], args ) === false ) {
break;
}
}
}
// A special, fast, case for the most common use of each
} else {
if ( isObj ) {
for ( name in object ) {
if ( callback.call( object[ name ], name, object[ name ] ) === false ) {
break;
}
}
} else {
for ( var value = object[0];
i < length &amp;amp;&amp;amp; callback.call( value, i, value ) !== false; value = object[++i] ) {}
}
}
return object;
}
[/code]
糟糕的代码:
[code="javascript"]
someDivs.each(function()?{
$('#anotherDiv')[0].innerHTML?+=?$(this).text();
});
[/code]
- 在每一次遍历循环中都会搜寻anotherDiv 这个ID的元素
- 两次获取innerHTML属性
- 创建了一个jQuery对象,只是为了获取元素的text属性
优化的代码:
[code=”javascript”]
var someDivs = $(‘#container’).find(‘.someDivs’),
contents = [];
someDivs.each(function() {
contents.push( this.innerHTML );
});
$(‘#anotherDiv’).html( contents.join(”) );
[/code]
each
(for)方法,我们唯一要执行任务的关键是增加一个新的到一个数组…而不是查询DOM中,取代了元素两次获取innerHTML属性等。
内容不错,但翻译还是要用点心的
这说的是要缓存jQuery对象
标题写的大一点,点击来的多一点,哈哈!
初学者使用jQuery比使用原生JS更容易编出效率低下的代码
一般能不用each就不用each。对于确定没有兼容性问题的属性和function,可以考虑使用原生属性或function
var someDivs = $(‘#container’).find(‘.someDivs’),
contents = [];
var len = someDivs.length;
for ( var i=0; i<len; i++ ) {
contents.push( someDivs[i].innerHTML );
}
$('#anotherDiv')[0].innerHTML = contents.join('')
$('#anotherDiv').html( contents.join('') ); //如果沒有特別需要, 可改用getElementById()获取元素
愚见,莫见笑;)
想法不错,但这样做,each 跟 for 比较效率,差多少呢?