Question

I tried adding a serialized class to each of a set of objects like this:

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

And it worked. What resulted was a set of images, each with a class image1, image2, and so on. It’s exactly what I wanted. But is this actually a reliable method of looping through a set of objects? Or is it possible that, if this anonymous function took longer to execute, the function might start on the next object before index is incremented?

Anybody know what’s actually happening?

Answer 1

This is the inner workings of the each function (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;
}

You can see here that it has a few different cases but all of them use for loops and call the callback function. So your code should be fine.

You can look it up in the development version of jQuery (change the radio button on the main jQuery site, or click here).