Question

我有一个问题，我正在寻找有关最佳方法的建议。我有一个标签式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"));

<强> I have made a JSFiddle for the above code

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

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

1 个答案: