jQuery的“each()”方法是一个for循环吗？

Question

我尝试给一组对象添加一个序列化类，代码如下：

jQuery('#preload img').each(function(){
    jQuery('#thumbs').append('<img class="index' + index + '" src="' + source + '" />');
    index = ++index;
    });

它起作用了。结果是一组带有类image1，image2等的图像。这正是我想要的。但是这种循环一组对象的方法是否可靠？如果这个匿名函数执行时间更长，那么函数是否可能在增加index之前开始下一个对象？

有人知道实际发生了什么吗？

- Isaac Lubow

---

更好的解决方法是在循环之前初始化一个空字符串，每次循环时将结果连接到该字符串中，然后在循环结束后一次性使用$(...).append将该字符串添加到DOM中。因为DOM操作速度较慢，这种做法更加高效。 - Ken Franqueiro

Answer 1

这是each函数（1.4.4版本）的内部工作原理：

// args is for internal usage only
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 && callback.call( value, i, value ) !== false; value = object[++i] ) {}
        }
    }

    return object;
}

你可以看到这里有几种不同的情况，但所有情况都使用for循环并调用回调函数。所以你的代码应该没问题。

你可以在jQuery的开发版本中查找它（更改主jQuery网站上的单选按钮，或点击这里）。

- Richard Marskell - Drackir

Answer 2

.each()本质上是一个for循环，并且如果您传入参数，它还具有内置的索引可供使用：

jQuery('#preload img').each(function(i){
    jQuery('#thumbs').append('<img class="index' + i + '" src="' + source + '" />');
});

编辑：使用Ken Franqueiro的字符串连接建议的奖励实现：

var thumbsAppend = "";
jQuery('#preload img').each(function(i){
    thumbsAppend += '<img class="index' + i + '" src="' + source + '" />';
});
jQuery('#thumbs').append(thumbsAppend);

编辑#2：还有rahul的数组推荐建议：

var thumbsAppend = [];
jQuery('#preload img').each(function(i){
    thumbsAppend.push('<img class="index' + i + '" src="' + source + '" />');
});
thumbsAppend = thumbsAppend.join('');
jQuery('#thumbs').append(thumbsAppend);

- mVChr

---

最好使用数组推送而不是字符串拼接。 - rahul

@rahul，仅适用于IE7及以下版本，在其他浏览器中两种方法大致相同，除了Safari浏览器，其中连接速度更快。 - David Tang

啊，精彩的基准测试世界。说实话，strcat和arr.push之间的差异与它们与DOM调整之间的差异相比微不足道。如果它在一个相对较慢的计算机上（如netbook）能够正常工作，那么你应该没问题。 - zzzzBov

Answer 3

http://api.jquery.com/jQuery.each/

http://api.jquery.com/each/

通过数值索引进行迭代，从0到length-1。

- djeeg