データ属性の数値で要素を並べ替えます

Question

属性が複数の要素を持っています：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：Javascriptのか、jQueryのいずれかを使用して

<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> 

？あなたはdatasetプロパティを使用することはできませんIE < 10を、使用している場合http://jsfiddle.net/UdvDD/

---

：

Answer 1

使用Array.sort：

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

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

はここでフィドルです。代わりにgetAttributeを使用してください：

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

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

はここでフィドルだ：私はTinysort jQueryプラグインはオプションであるべきだと思うhttp://jsfiddle.net/UdvDD/1/

Answer 2

、あなたは私がここでそれを得ることができます：http://tinysort.sjeiti.com/

を、私はそれを試していなかったが、コードは次のようになります。

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

が、これは

を助けることを願っています

Answer 3

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

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