Question

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

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

此列表是控件呈现时需要以某种方式操作的元素列表。 $ fields列表中的每个元素都包含一个名为“data-order”的数据属性。这个属性告诉我应该在控件中安排元素的顺序（啊要求）。顺序不必是直接线性顺序（意味着第一个控件的属性值为10，下一个15和下一个控件等等。它们只需要按asc顺序出现。是否有一个简单的实现这一目标的方法？我能提出的所有方法看起来有点过于复杂。

Answer 1

试试这个：

$(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 2

在搜索了许多解决方案后，我决定blog about how to sort in jquery。总之，对jquery＆＃34; array-like＆＃34;进行排序的步骤数据属性对象......

通过jquery selector
转换为实际数组（不是类似数组的jquery对象）
对象数组进行排序
使用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>
]

See how getSorted() works.

希望这有帮助！

Answer 3

类似的东西：

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

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

Answer 4

插入排序是一种相当直接的方式。

或者有点颠覆性，你可以利用JavaScript引擎：

var $fields, $container, sorted, index;

$container = $('body');
$fields = $("div[data-order]", $container);
sorted = [];
$fields.detach().each(function() {
    sorted[parseInt(this.getAttribute("data-order"), 10)] = this;
});
sorted.forEach(function(element) {
    $container.append(element);
});

直播示例：

(function($) {
    var $fields, $container, sorted, index;
  
    $container = $('body');
    $fields = $("div[data-order]", $container);
    sorted = [];
    $fields.detach().each(function() {
        sorted[parseInt(this.getAttribute("data-order"), 10)] = this;
    });
    sorted.forEach(function(element) {
        $container.append(element);
    });
})(jQuery);

<div data-order="30">30</div>
<div data-order="40">40</div>
<div data-order="10">10</div>
<div data-order="20">20</div>
<div data-order="1">1</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

以下是它的工作原理：

我们获取容器，并从中获取字段。
我们创建一个空白数组。请记住JavaScript数组aren't really arrays at all，它们本质上是稀疏的。
我们分离字段，然后循环遍历它们，从DOM元素获取data-order并将DOM元素添加到该位置的数组中。这假定data-order值是唯一的。
一旦我们拥有原始DOM元素数组，我们就会使用forEach遍历它，并将它们附加到容器中。我没有使用jQuery.each，因为即使对于不存在的数组索引，jQuery.each也会调用回调，如果data-order值非常稀疏则可能会出现问题。 forEach按数字顺序迭代条目，跳过不存在的条目。

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

4 个答案: