Javascript 按数据属性的数值对元素进行排序
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14160498/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Sort element by numerical value of data attribute
提问by JayDee
I have multiple elements with the attribute: data-percentage, is there a way of sorting the elements into ascending order with the lowest value first?
我有多个具有属性的元素：data-percentage，有没有办法将元素按升序排序，最低值首先？
HTML:
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>
Desired result: HTML:
预期结果：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>
using either Javascript or jQuery?
使用 Javascript 还是 jQuery？
回答by Joseph Silber
Use Array.sort:
使用Array.sort：
var $wrapper = $('.testWrapper');
$wrapper.find('.test').sort(function(a, b) {
return +a.dataset.percentage - +b.dataset.percentage;
})
.appendTo($wrapper);
Here's the fiddle: http://jsfiddle.net/UdvDD/
这是小提琴：http: //jsfiddle.net/UdvDD/
If you're using IE < 10, you can't use the datasetproperty. Use getAttributeinstead:
如果您使用的是 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);
Here's the fiddle: http://jsfiddle.net/UdvDD/1/
这是小提琴：http: //jsfiddle.net/UdvDD/1/
回答by Jeaf Gilbert
$('.testWrapper').find('.test').sort(function (a, b) {
return $(a).attr('data-percentage') - $(b).attr('data-percentage');
})
.appendTo('.testWrapper');
回答by thebronsonite
For some reason, on Firefox 64.0.2, none of the answers worked for me. This is what worked in the end, a mixture of Joseph Silber and Jeaf Gilbert's answers:
出于某种原因，在 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);
回答by FedIz
I think that the Tinysort Jquery plugin should be an option, you can get it i here: http://tinysort.sjeiti.com/
我认为 Tinysort Jquery 插件应该是一个选项，你可以在这里得到它：http://tinysort.sjeiti.com/
I did not tried it but the code should look like this:
我没有尝试过，但代码应该是这样的：
$("#test > div").tsort("",{attr:"data-percentage"});
hope this will help
希望这会有所帮助
回答by Benjamin James Kippax
A more robust option, this function can allow you to sort elements based on multiple options.
更强大的选项，此功能可以让您根据多个选项对元素进行排序。
https://jsfiddle.net/L3rv3y7a/1/
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);
}
