Элемент сортировки по числовому значению атрибута данных

У меня есть несколько элементов с атрибутом: 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);
    }