jquery - JQuery 中元素的排序列表

Question

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

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

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

Answer 1

按数据属性对 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>

Plain jquery selector

$('.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>
]

Lets sort this by data-order

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.

希望这有帮助!