jQuery的"each()"方法是for循环吗？

Question

我尝试将序列化类添加到每个对象中,如下所示:

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

它奏效了.结果是一组图像,每个图像都有一个类image1,image2等等.这正是我想要的.但这实际上是循环一组对象的可靠方法吗？或者,如果此匿名函数执行时间较长,该函数可能会在index递增之前在下一个对象上启动吗？

谁知道实际发生了什么？

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站点上的单选按钮,或单击此处).

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