javascriptajaxjqueryjquery-load

How to show use jQuery load() to ajax multiple items into multiple elements?

I need to load certain items from a big page into a page's different elements. The code I wrote is working but items load one by one and after a lot of pause. I am thinking I might doing it wrong way as I am not a complete developer but just a designer.

My code look likes: 

$("#lot-rental").load("/est.html #est-rental");
$("#lot-deposit").load("/est.html #est-deposit");
$("#lot-date").load("/est.html #est-date");
$("#lot-build").load("/est.html #est-build");
Solution

  • Use $.get() to load the data and then set the content of the various elements manually.

    $.get('/est.html', function(data) {
    $.each(['rental', 'deposit', 'data', 'build'], function(i, key) {
        $('#lot-' + key).html($(data).find('#est-' + key));
    });
}, 'html');