我有一个难题,正在寻求有关最佳处理方式的建议。我设置了一个选项卡式 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 没有问题。
最佳答案
这是解决您正在寻找的问题的快速方法
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()
关于javascript - Ajax 内容可排序 jQuery portlet,加载后按 'sortOrder' 变量排序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21330270/