在JQuery中对元素列表进行排序

Question

我有一个使用JQuery获得的元素列表.

var $self = $(this);
var $fields = $('.identifier-controls', $self);

此列表是控件呈现时需要以某种方式操作的元素列表.$ fields列表中的每个元素都包含一个名为"data-order"的数据属性.这个属性告诉我应该在控件中安排元素的顺序(啊要求).顺序并不一定要在直接线性顺序(这意味着第一个控件可以有10个属性值和下一个15和下一个17等,他们只需要出现在递增顺序,有一个简单的实现这一目标的方法？我能提出的所有方法看起来有点过于复杂.

Answer 1

就像是：

$fields.sort(function(a, b) {
    return a.getAttribute('data-order') > b.getAttribute('data-order');
}).appendTo($fields.parent());

小提琴： http: //jsfiddle.net/gCFzc/

Answer 2

尝试这个：

$(function(){
   var $self = $(this);
   var sortedList = $('.identifier-controls', $self).sort(function(lhs, rhs){
      return parseInt($(lhs).attr("data-order"),10) - parseInt($(rhs).attr("data-order"),10);
   });
});

变量sortedList现在具有已排序的元素。

Answer 3

在搜索了许多解决方案之后,我决定在博客中介绍如何在jquery中进行排序.总之,按数据属性对jquery"类数组"对象进行排序的步骤......

1. 通过jquery选择器选择所有对象
2. 转换为实际数组(不是类似数组的jquery对象)
3. 对对象数组进行排序
4. 使用dom对象数组转换回jquery对象

HTML

<div class="item" data-order="2">2</div>
<div class="item" data-order="1">1</div>
<div class="item" data-order="4">4</div>
<div class="item" data-order="3">3</div>

普通的jquery选择器

$('.item');

[<div class="item" data-order="2">2</div>,
 <div class="item" data-order="1">1</div>,
 <div class="item" data-order="4">4</div>,
 <div class="item" data-order="3">3</div>
]

让我们按数据顺序排序

function getSorted(selector, attrName) {
    return $($(selector).toArray().sort(function(a, b){
        var aVal = parseInt(a.getAttribute(attrName)),
            bVal = parseInt(b.getAttribute(attrName));
        return aVal - bVal;
    }));
}

> getSorted('.item', 'data-order')

[<div class="item" data-order="1">1</div>,
 <div class="item" data-order="2">2</div>,
 <div class="item" data-order="3">3</div>,
 <div class="item" data-order="4">4</div>
]

了解getSorted()的工作原理.

希望这可以帮助!