Элемент сортировки по числовому значению атрибута данных
У меня есть несколько элементов с атрибутом: 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?
Ответы
Ответ 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/
Ответ 2
$('.testWrapper').find('.test').sort(function (a, b) {
return $(a).attr('data-percentage') - $(b).attr('data-percentage');
})
.appendTo('.testWrapper');
Ответ 3
Я думаю, что плагин Tinysort Jquery должен быть вариантом, вы можете получить его здесь: http://tinysort.sjeiti.com/
Я не пробовал, но код должен выглядеть так:
$("#test > div").tsort("",{attr:"data-percentage"});
надеюсь, что это поможет
Ответ 4
Более надежная опция, эта функция позволяет сортировать элементы на основе нескольких опций.
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);
}