Question

Possible Duplicate:
Multiple ajax calls inside a each() function.. then do something once ALL of them are finished?

Basically, I want to run a function after an each() loop containing load() for each loop completely finishes. It takes some time to load each link and is waiting for the browser to catch up but the script has already moved on to the next step. Any ideas?

jQuery('#theId a').each(function() { // contains many links
    toLoad = jQuery(this).attr('href');
    jQuery('#containment').load(toLoad, function(response) {
       //do stuff
    });
 });

//... Do stuff after the above is really complete.

Answer 1

Try something like this:

var e = jQuery("#theId a"), l = e.length;
e.each(function() {
    toLoad = this.attr("href"); // I'm fairly sure "this" is already a jQuery object
    jQuery("#containment").load(toLoad, function(response) {
        // do stuff
        l--;
        if( l == 0) {
            // this is the last one - do ending stuff here.
        }
    });
});

If “this” isn’t already a jQuery object, just revert that line to what you have.