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

Question

我有一个浓度，正在寻找有关继续进行的最佳方法的建议。我设置了一个选项卡式portlet接口。选项卡是从JSON响应中动态生成的，然后从第一个TAB激活上的另一个Web Service 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为变量）。实际实现将更加复杂，因为我可能会循环遍历所有端口，the sortorder选择器并将其解析为INT，因为每个选项卡不是静态的portlets数量。

我错过了一些东西，有一种痛苦的简单方法可以实现这一目标吗？

预先感谢。

更新：

我已经实现了以下由@AndréSnedeHansen给出的答案，并且它运作良好。分类顺序是通过数据属性方法（而不是按我最初打算使用类）来实现的，从而动态添加每个响应中返回的整数，然后在我的portletify的末尾进行排序（添加UI类可排序等）Tab方法。

在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")返回一个元素的数组，并且数组具有 sort 方法。排序方法在这里进一步描述： array.prototype.sort（）