按數據屬性的數值排序元素

我有多個元素的屬性：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的？

來源

2013-01-04 JayDee

你周圍有這些div包裹DIV？ – sp00m

是的，有 - 我已經更新了這個問題來反映。 – JayDee

使用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/

來源

2013-01-04 16:04:03

這裏你不需要*一元加號，因爲'-'會將兩個操作數轉換爲數字。它使事情更清晰。 –

@FelixKling - 我討厭隱式投射。如果我在做數學，我喜歡直接處理數字。 –

jQuery.data是你的朋友 –

我認爲Tinysort jQuery插件應該是一種選擇，你可以得到它，我在這裏：http://tinysort.sjeiti.com/

我沒有嘗試過，但代碼應該是這樣的：

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

希望這將有助於

來源

2013-01-04 16:21:41 FedIz

不需要第一個空字符串參數。只是將它作爲唯一的參數傳遞給它。 –

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

來源

2014-07-16 09:30:53

Gilber我有一個問題，如果div沒有'數據比例'我想去最後一個地方，這可能嗎？謝謝。 – diank

更強大的選項，該功能可以讓您根據多個選項對元素進行排序。

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

來源

2017-12-14 17:08:47

按數據屬性的數值排序元素

回答

相關問題