我有多个带有属性的元素：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>
使用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/
$('.testWrapper').find('.test').sort(function (a, b) {
return $(a).attr('data-percentage') - $(b).attr('data-percentage');
})
.appendTo('.testWrapper');
出于某种原因，在 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);
我认为 Tinysort Jquery 插件应该是一个选项，你可以在这里得到它：http ://tinysort.sjeiti.com/
我没有试过，但代码应该是这样的：
$("#test > div").tsort("",{attr:"data-percentage"});
希望这会有所帮助
更强大的选项，此功能可以让您根据多个选项对元素进行排序。
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);
}