javascript - 如何按数据属性的数值对元素进行排序？

Question

我有多个具有属性的元素：data-percentage，有没有一种方法可以先使用 JavaScript 或 jQuery 将元素排序为最低值的升序？

HTML：

<div class="testWrapper">
  <div class="test" data-percentage="30">
  <div class="test" data-percentage="62">
  <div class="test" data-percentage="11">
  <div class="test" data-percentage="43">
</div>

期望的结果：

<div class="testWrapper">
  <div class="test" data-percentage="11">
  <div class="test" data-percentage="30">
  <div class="test" data-percentage="43">
  <div class="test" data-percentage="62">
</div>

Answer 1

使用Array.sort：

var $wrapper = $('.testWrapper');

$wrapper.find('.test').sort(function(a, b) {
    return +a.dataset.percentage - +b.dataset.percentage;
})
.appendTo($wrapper);

这是小提琴：http: //jsfiddle.net/UdvDD/

---

如果您使用的是 IE < 10，则不能使用该dataset属性。改用getAttribute：

var $wrapper = $('.testWrapper');

$wrapper.find('.test').sort(function(a, b) {
    return +a.getAttribute('data-percentage') - +b.getAttribute('data-percentage');
})
.appendTo($wrapper);

这是小提琴：http: //jsfiddle.net/UdvDD/1/

Answer 2

$('.testWrapper').find('.test').sort(function (a, b) {
   return $(a).attr('data-percentage') - $(b).attr('data-percentage');
})
.appendTo('.testWrapper');

Answer 3

出于某种原因，在 Firefox 64.0.2 上，没有一个答案对我有用。这就是最终奏效的方法，混合了 Joseph Silber 和 Jeaf Gilbert 的答案：

var $wrapper = $('.testWrapper');

$wrapper.find('.test').sort(function(a, b) {
    return +$(a).data('percentage') - +$(b).data('percentage');
})
.appendTo($wrapper);

Answer 4

我认为 Tinysort Jquery 插件应该是一个选项，你可以在这里得到它：http: //tinysort.sjeiti.com/

我没有尝试过，但代码应该如下所示：

$("#test > div").tsort("",{attr:"data-percentage"});

希望这会有所帮助

Answer 5

一个更强大的选项，此功能可以让您根据多个选项对元素进行排序。

https://jsfiddle.net/L3rv3y7a/1/

// This calls the function
DOYPSort('#wrapper', '.element', value, order);

    // Parameters must be strings
    // Order of must be either 'H' (Highest) or 'L' (Lowest)
    function DOYPSort(wrapper, elementtosort, AttrToSort, orderof) {
        $(wrapper).find(elementtosort).sort(function (a, b) {
            if (orderof === 'H') {
                return +b.getAttribute(AttrToSort) - +a.getAttribute(AttrToSort);
            } 
            if (orderof === 'L') {
                return +a.getAttribute(AttrToSort) - +b.getAttribute(AttrToSort);
            }
        }).appendTo(wrapper);
    }