javascript - Is jQuery's "each()" method a for loop? - Stack Overflow

admin管理员组

文章数量:1303404

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?

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?

• javascript
• jquery

Share Improve this question Follow asked Jan 23, 2011 at 6:37 Isaac LubowIsaac Lubow 3,57355 gold badges4040 silver badges5757 bronze badges 1

• 4 FWIW a more performant approach would be to initialize a blank string before that loop, concatenate to it each time through the loop, then $(...).append the string a single time after the loop finishes. DOM is notoriously slow. – Ken Franqueiro Commented Jan 23, 2011 at 6:47

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 8

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 mon 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).

.each() is indeed essentially a for loop and it also has a built in index you can use if you pass in an argument like so:

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

---

EDIT: Bonus implementation with Ken Franqueiro's string concatenation suggestion:

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

---

EDIT #2: And rahul's array push suggestion:

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

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

http://api.jquery./each/

are iterated by numeric index, from 0 to length-1

本文标签： javascriptIs jQuery39s quoteach()quot method a for loopStack Overflow