Question

I’m developing a site where I want to get all the links from a navigation bar, and load a div from the linked pages into a big container. What I have so far is the following:

$('nav a').each(function(index){
    var to_load = $(this).attr('href') + '#slides section';
    $('<section>').load(to_load, function(){
        $('#slides').append($(this).html());
    });
});

This works great, apart from the fact that it is almost alway out of order, probably due to loading it asynchronously. Is there a way to load each at a time, so the sections will be in order, while still keeping it flexible?

Thanks heaps in advance!

Answer 1

I’d try with async: false mentioned jQuery.ajax documentation.
Don’t know if it works with load but I’d bet it does.

Also, for performance reason, don’t use:

$(this).attr('href') + '#slides section'

but

this.href + '#slides section'

To avoid converting this into a jQuery element (you only need it to get the href attribute).