JQuery load function for group of links one by one?

Question

I have an ul which contains many links. when using jQuery to load these links, it renders them all at same time. How can i load them one by one, having attempted the following:

js:

$('#publish').click(function() {
    $('#get_links li').
        each(function() {
            $(this).load('test.php',{'post':$(this).text()});
            $(this).html("<i class='icon-spin icon-spinner'></i>Loading");

            ///NEED TOSLEEP UNTILL $.load finish..
        }
        );
     }
);

How can i sleep the .each loop until .load finish ?

possible duplicate of [Continue Execution Only After .each() Completes](http://stackoverflow.com/questions/9043968/continue-execution-only-after-each-completes) — karthikr, Apr 07 '13 at 21:03
I think the questions are unique enough - the one you cited doesn't have to do with `$().load()` at all. — jmar777, Apr 07 '13 at 21:09

score 2 · Accepted Answer · answered Apr 07 '13 at 21:08

You can use the $().load callback for this:

$('#publish').click(function(){
    var $link = $('#get_links li').first();

    var loadLink = function() {
        $link.load('test.php', { post: $link.text() }, function() {
            // once loading is done, grab the next link...
            $link = $link.next();
            // ... and load it if we found one
            if ($link.length) loadLink();
        }).html('<i class="icon-spin icon-spinner"></i>Loading');
    };

    // load the first link
    loadLink();
});

wow .. never thought of using .next() ! :). thats perfect thanks alot — Zalaboza, Apr 07 '13 at 21:13

JQuery load function for group of links one by one?

1 Answers1