javascript - Ajax 内容可排序 jQuery portlet，加载后按 'sortOrder' 变量排序

Question

我有一个难题，正在寻求有关最佳处理方式的建议。我设置了一个选项卡式 portlet 界面。选项卡是从 JSON 响应动态生成的，然后每个选项卡的 portlet 在第一个选项卡激活时从另一个 Web 服务 JSON 响应加载。 Portlet 需要按照从 JSON 返回的预先确定的变量进行排序(目前它们按照 ajax 请求返回的顺序加载)。

我正在寻找最简单的方法来做到这一点。我最初的想法是在创建 Portlet 时将变量附加到一个类中，最终得到类似于以下的 HTML 标记:

<div class="tabBody">
   <div class="portlet sortOrder1">Content</div>
   <div class="portlet sortOrder4">Content</div>
   <div class="portlet sortOrder2">Content</div>
   <div class="portlet sortOrder5">Content</div>
   <div class="portlet sortOrder3">Content</div>
</div>

然后在使用类似于以下内容的 javascript 加载所有 portlet 后对它们进行排序:

tab.find('sortOrder2').insertAfter(tab.find('.sortOrder1'));

举个简单的例子(tab 是一个变量)。实际实现会稍微复杂一些，因为我可能会遍历所有 portlet，通配符 sortOrder 选择器并解析出 int，因为每个选项卡的 portlet 数量不是静态的。

我是否遗漏了什么，有一种非常简单的方法可以实现这一点？

提前致谢。

更新:

我已经实现了@André Snede Hansen 在下面给出的答案，并且运行良好。排序顺序是通过数据属性方法(而不是像我最初打算的那样使用类)动态添加从每个响应返回的整数，然后在我的 portletify(添加 ui 类可排序等)选项卡方法的末尾进行排序。

在 IE 中测试回 7 没有问题。

Answer 1

这是解决您正在寻找的问题的快速方法

HTML:

<div class="tabBody">
    <div class="portlet" data-order="1">Content1</div>
    <div class="portlet" data-order="4">Content4</div>
    <div class="portlet" data-order="2">Content2</div>
    <div class="portlet" data-order="5">Content5</div>
    <div class="portlet" data-order="3">Content3</div>
</div>

Javascript:

$(".tabBody .portlet").sort(function(x, y){
   var orderX = parseInt($(x).attr("data-order"),10) || 0;
   var orderY = parseInt($(y).attr("data-order"),10) || 0;
   return orderX - orderY;
}).appendTo($(".tabBody"));

I have made a JSFiddle for the above code

$(".tabBody .portlet") 返回一个元素数组，数组有一个sort 方法。此处进一步描述了排序方法: Array.prototype.sort()