Sortuj element według wartości liczbowej atrybutu danych

Question

Mam wiele elementów z atrybutem: data-percentage, czy istnieje sposób sortowania elementów w kolejności rosnącej z najniższą wartością jako pierwszą?

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> 

Pożądany wynik: 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> 

przy użyciu JavaScript lub jQuery?

Answer 1

Zastosowanie Array.sort:

var $wrapper = $('.testWrapper'); 

$wrapper.find('.test').sort(function(a, b) { 
    return +a.dataset.percentage - +b.dataset.percentage; 
}) 
.appendTo($wrapper); 

Oto skrzypce: http://jsfiddle.net/UdvDD/

---

Jeśli używasz IE < 10, nie można użyć właściwości dataset. Użyj getAttribute zamiast:

var $wrapper = $('.testWrapper'); 

$wrapper.find('.test').sort(function(a, b) { 
    return +a.getAttribute('data-percentage') - +b.getAttribute('data-percentage'); 
}) 
.appendTo($wrapper); 

Oto skrzypce: http://jsfiddle.net/UdvDD/1/

Answer 2

myślę, że plugin Tinysort Jquery powinna być opcja, można dostać się I tutaj: http://tinysort.sjeiti.com/

nie próbował go jednak kod powinien wyglądać tak:

$("#test > div").tsort("",{attr:"data-percentage"}); 

nadzieję, że pomoże

Answer 3

$('.testWrapper').find('.test').sort(function (a, b) { 
    return $(a).attr('data-percentage') - $(b).attr('data-percentage'); 
}) 
.appendTo('.testWrapper'); 

Answer 4

Ta bardziej funkcjonalna opcja pozwala na sortowanie elementów w oparciu o wiele opcji.

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