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

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