如何按特定顺序对 jQuery 选定元素执行操作？答案

【问题标题】：How to run action on jQuery selected elements in certain order?如何按特定顺序对 jQuery 选定元素执行操作？
【发布时间】：2010-01-06 22:52:48
【问题描述】：

我有一个这样的 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>

现在，我想对 latest 类的所有对象运行一个 jQuery 操作（一个 ajax 调用），这很简单：

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

但由于 ajax 操作需要一些时间，我将元素按其重要性排序。我想为具有order1 的对象运行do_call()，然后为order2 元素运行，依此类推。

如何对 jQuery 对象进行排序，以便操作按正确顺序运行？

【问题讨论】：

标签： jquery sorting css-selectors

【解决方案1】：

首先，在一个数组中获取所有.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 元素没有按顺序索引，此方法也有效；例如。你可以在order1 之后有order4，但不存在order2 或order3，它仍然有效。

【讨论】：

为什么是.attr('class')？有必要吗？
嗯，是的，如果你想获取元素的类名。
好的，但是与 'addClass' 链接的 'attr' 不会返回一个 jQuery 对象吗？
@Mickel，你是对的，addClass 应该是独立的。固定。

【解决方案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++;
}

【讨论】：

【解决方案3】：

为什么不在一个“大”ajax 调用中完成所有操作，而不是为每个元素运行单独的 ajax 调用？找出一种方法来整合您的数据，使其在服务器端分离，并通过单一响应更新客户端上的元素。

【讨论】：

因为如果一个 ajax 调用需要大约 30 秒到 5 分钟，我更喜欢以较小的块进行 - 只是为了能够更快地更新和显示最重要部分的结果。

【解决方案4】：

我认为您可以找到有用的AJAX QUEUE plugin。来自手册：

Ajax Queue 是一个有助于管理 Ajax 竞争条件的插件。当多个 Ajax 请求快速连续发出时，结果可能会乱序返回。这可能会导致您的应用程序出现奇怪的行为。 Ajax Queue 是一个插件（实际上是 2 个插件），它提供了一种管理这些请求的方法。

【讨论】：