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.

希望这有帮助!