Question

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

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>

期望的结果： HTML：

  <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>

使用Javascript还是jQuery？

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＆lt; 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

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

我没试过，但代码应该是这样的：

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

希望这会有所帮助

Answer 4

由于某种原因，在Firefox 64.0.2上，没有答案对我有用。最终，这是有效的，混合了约瑟夫·西尔伯（Joseph Silber）和贾夫·吉尔伯特（Jaaf Gilbert）的答案：

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

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

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);
    }

按数据属性的数值对元素进行排序

5 个答案: