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

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.