Как запустить действие над выбранными элементами jQuery в определенном порядке?

Question

У меня есть такая HTML-таблица:

<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>

Теперь я хочу запустить действие jQuery (вызов ajax) для всех объектов класса latest, это просто:

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

Но поскольку действие ajax занимает некоторое время, у меня есть элементы, упорядоченные по их важности. И я хотел бы запустить do_call() для объекта с order1, затем для order2 элемента и т. Д.

Как я могу отсортировать объекты jQuery, чтобы действия выполнялись в правильном порядке?

Answer 1

Почему бы не сделать все это за один «большой» вызов ajax вместо выполнения отдельных вызовов ajax для каждого элемента? Найдите способ консолидации ваших данных таким образом, чтобы они были разделены на стороне сервера и чтобы один ответ обновлял элементы на клиенте.

Answer 2

это может быть более эффективным, но оно должно делать то, что вы ищете:

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

Сначала получите все элементы .latest и их классы порядка в массиве:

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');
});

Затем отсортируйте массив и переберите его, получите соответствующий элемент:

order.sort();

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

Этот метод работает, даже если ваши элементы .latest не проиндексированы последовательно; например. Вы можете иметь order4 после order1 при отсутствии order2 или order3, и оно все еще работает.

Answer 4

Я думаю, вы можете найти AJAX QUEUE плагин полезным. Из руководства:

Ajax Queue - это плагин, который помогает управлять условиями гонки Ajax. Если несколько запросов Ajax выполняются в быстрой последовательности, результаты могут быть возвращены не по порядку. Это может вызвать странное поведение в вашем приложении. Ajax Queue - это плагин (фактически 2 плагина), который обеспечивает способ управления этими запросами.