How to run action on jQuery selected elements in certain order?

Question

I have a HTML table like this:

<table>
 <tr><td>X</td><td>X</td><td class='latest order1'>X</td><td class='latest order4'>X</td></tr>
 <tr><td>X</td><td>X</td><td class='latest order3'>X</td><td class='latest order2'>X</td></tr>
 <tr><td>X</td><td>X</td><td class='latest order6'>X</td><td class='latest order5'>X</td></tr>
</table>

Now, I want to run a jQuery action (an ajax call) on all objects of latest class, that's a simple:

$('.latest').each(do_call());

But since the ajax action takes some time, I have the elements ordered by their importance. And I would like to run the do_call() for object with order1, then for order2 element, and so on.

How can I sort jQuery objects, so the actions would run in proper order?

Answer 1

I think you can find AJAX QUEUE plugin usefull. From the manual:

Ajax Queue is a plugin that helps to manage Ajax race conditions. When multiple Ajax requests are made in rapid succession, the results can be returned out of order. This can cause weird behavior in your application. Ajax Queue is a plugin (actually, 2 plugins) that provide a way to manage these requests.

Answer 2

this can probably be more efficient but it should do what you are looking for:

var latestItems = $('.latest');
var order = 1;
for(var i = -1, len = latestItems.length; ++i < len ) {
    var item = $('.latest .order' + order);
    doCall.call(item);
    order++;
}

Answer 3

First, get all the .latest elements and their order classes in an array:

var order = [];

$('.latest').each(function() {
    // Get the order - all elements have class 'latest orderX':
    // remove the 'latest', get the classname, and add the latest back.
    order.push($(this).removeClass('latest').attr('class'));
    $(this).addClass('latest');
});

Then sort the array and loop through it, get the corresponding element:

order.sort();

for(var i in order) {
    var obj = $('.latest.'+order[i]);
    do_call(obj);
}

This method works even if your .latest elements are not sequentially indexed; eg. you can have order4 after order1 with no order2 or order3 present and it still works.

Answer 4

Why not do it all in one 'big' ajax call instead of running separate ajax calls for each element? Figure out a way to consolidate your data in such a way that it be separated on the server side and a have a single response update the elements on the client.