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

Question

我有一个conumdrum，我正在寻找关于最佳方式的建议。 我有一个标签式portlet接口设置。 选项卡是从JSON响应动态生成的，然后在第一个选项卡激活时从另一个Web服务JSON响应加载每个选项卡的portlet。 需要通过从JSON返回的预定变量对portlet进行排序（目前它们按照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，因为每个tab的portlet数量不是静态的。

我错过了什么，有一个非常简单的方法来达到这个目的吗？

提前致谢。

更新：

我已经实现了@AndréSnedeHansen给出的答案，它的工作非常完美。 排序顺序是通过数据属性方法实现的（而不是使用我最初想要的类）动态添加从每个响应返回的整数，然后在我的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"));

我为上面的代码制作了一个JSFiddle

$(".tabBody .portlet")返回一个$(".tabBody .portlet")数组，数组有一个sort方法。 sort方法在这里进一步描述： Array.prototype.sort（）