根據javascript / jquery中從低到高的div類型對div排序數組

Question

下面的代碼用於對數組進行排序，如下所示：

function sorter(a, b) {
    if((b.dataset.type === 'Recommended') && (a.dataset.type === 'Recommended'))
      return (b.dataset.type === 'Recommended') - (a.dataset.type === 'Recommended') || a.dataset.amount - b.dataset.amount;
    if((b.dataset.type === 'Featured') && (a.dataset.type === 'Featured'))
        return (b.dataset.type === 'Featured') - (a.dataset.type === 'Featured') || a.dataset.amount - b.dataset.amount;
    if((b.dataset.type === 'Special Offer') && (a.dataset.type === 'Special Offer'))
        return (b.dataset.type === 'Special Offer') - (a.dataset.type === 'Special Offer') || a.dataset.amount - b.dataset.amount;
    if((b.dataset.type === 'Christmas') && (a.dataset.type === 'Christmas'))
        return (b.dataset.type === 'Christmas') - (a.dataset.type === 'Christmas') || a.dataset.amount - b.dataset.amount;
    if((b.dataset.type === '') && (a.dataset.type === ''))
        return (b.dataset.type === '') - (a.dataset.type === '') || a.dataset.amount - b.dataset.amount;
  }
  var sortedDivs = $(".terminalpopular").toArray().sort(sorter);

我根據div上標記的不同類型（即推薦類型，推薦類型，聖誕節類型和無類型）對數組進行了排序，如下所示：

<div class=​"terminalpopular" data-amount=​"65.95" data-type=​"Recommended">​…​</div>​
<div class=​"terminalpopular" data-amount=​"70" data-type=​"Recommended">​…​</div>​
<div class=​"terminalpopular" data-amount=​"94.95" data-type=​"Recommended">​…​</div>​
<div class=​"terminalpopular" data-amount=​"67.99" data-type=​"Featured">​…​</div>​
<div class=​"terminalpopular" data-amount=​"75" data-type=​"Featured">​…​</div>​
<div class=​"terminalpopular" data-amount=​"78" data-type=​"Christmas">​…​</div>​
<div class=​"terminalpopular" data-amount=​"84.99" data-type=​"Christmas">​…​</div>​
<div class=​"terminalpopular" data-amount=​"54.95" data-type>​…​</div>​
<div class=​"terminalpopular" data-amount=​"84.99" data-type>​…​</div>​

我想按以下順序對其進行排序（預期結果）：

<div class=​"terminalpopular" data-amount=​"65.95" data-type=​"Recommended">​…​</div>​
<div class=​"terminalpopular" data-amount=​"67.99" data-type=​"Featured">​…​</div>​
<div class=​"terminalpopular" data-amount=​"78" data-type=​"Christmas">​…​</div>​
<div class=​"terminalpopular" data-amount=​"70" data-type=​"Recommended">​…​</div>
<div class=​"terminalpopular" data-amount=​"75" data-type=​"Featured">​…​</div>​
<div class=​"terminalpopular" data-amount=​"84.99" data-type=​"Christmas">​…​</div>​​
<div class=​"terminalpopular" data-amount=​"94.95" data-type=​"Recommended">​…​</div>​
<div class=​"terminalpopular" data-amount=​"54.95" data-type>​…​</div>​
<div class=​"terminalpopular" data-amount=​"84.99" data-type>​…​</div>​

文字演示：

您能建議我如何以這種方式根據類型對數組進行排序嗎？ 即“推薦”的值分別為84、74、64，我們也具有“推薦類型”，其值分別為78、68、88。我們可以按以下形式對其進行排序：64（推薦），68（推薦），74（推薦）， 78（推薦），84（推薦），88（推薦）等，兒子呢？

Answer 1

以下是您想要的安排樣例。

據我了解，在這里使用1排序功能將很困難，因此已逐步解決了這些問題。 因此，以下解決方案可能需要許多額外的迭代。

 var emptyList = '__EMPTY__'; function processElements() { var list = $('.terminalpopular'); var clone = list.clone(); var groupedList = createGroups(clone); var sortedGroups = sortGroups(groupedList); var arrangedList = arrangeElements(sortedGroups); list.parent().empty().append(arrangedList) } // Create groups based on type function createGroups(list) { return Array.from(list).reduce(function(p, c){ var type = c.dataset.type || emptyList; p[type] = p[type] || []; p[type].push(c); return p; }, Object.create(null)); } // Sort each group by amount function sortGroups(list) { function sortFn(a, b) { return Number(a.dataset.amount) - Number(b.dataset.amount); } for (var k in list) { list[k].sort(sortFn); } return list; } // Rearrange elements based on index function arrangeElements(sortedList) { var list = []; var max = Math.max.apply(null, Object.keys(sortedList) .filter(x => x !== emptyList) .map(x => sortedList[x].length) ); for(var i = 0; i< max; i++) { list = list.concat(Object.keys(sortedList) .filter(x => x !== emptyList) .map(x => sortedList[x][i]) ); } list = list.concat(sortedList[emptyList]); return list; } // This is only for display purpose function displayValue() { $('.terminalpopular').each(function(i, el) { $(el).text($(el).data('amount')); if ($(el).data('type')) { $(el).addClass('highlight') } }) } displayValue(); processElements(); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <div> <div class="terminalpopular" data-amount="65.95" data-type="Recommended">​…​</div>​ <div class="terminalpopular" data-amount="70" data-type="Recommended">​…​</div>​ <div class="terminalpopular" data-amount="94.95" data-type="Recommended">​…​</div>​ <div class="terminalpopular" data-amount="67.99" data-type="Featured">​…​</div>​ <div class="terminalpopular" data-amount="75" data-type="Featured">​…​</div>​ <div class="terminalpopular" data-amount="78" data-type="Christmas">​…​</div>​ <div class="terminalpopular" data-amount="84.99" data-type="Christmas">​…​</div>​ <div class="terminalpopular" data-amount="54.95" data-type>​…​</div>​ <div class="terminalpopular" data-amount="84.99" data-type>​…​</div>​ </div> 

Answer 2

您可以使用sort()方法，然后先按數據type屬性排序，然后再按amount排序。

 var sorted = $(".parent > div").sort(function(a, b) { return ($(b).data('type') != '') - ($(a).data('type') != '') || +$(a).data('amount') - +$(b).data('amount') }) $('.parent').html(sorted) // Just for demo $('.parent > div').each(function() { $(this).text($(this).data('amount')) }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="parent"> <div class="terminalpopular" data-amount="65.95" data-type="Recommended">…</div> <div class="terminalpopular" data-amount="70" data-type="Recommended">…</div> <div class="terminalpopular" data-amount="94.95" data-type="Recommended">…</div> <div class="terminalpopular" data-amount="67.99" data-type="Featured">…</div> <div class="terminalpopular" data-amount="75" data-type="Featured">…</div> <div class="terminalpopular" data-amount="78" data-type="Christmas">…</div> <div class="terminalpopular" data-amount="84.99" data-type="Christmas">…</div> <div class="terminalpopular" data-amount="54.95" data-type>…</div> <div class="terminalpopular" data-amount="84.99" data-type>…</div> </div> 

更新基於類型和值的鍵創建的對象，並將其作為具有這些類型的元素的數組，然后根據數量對這些值進行排序，然后循環每個對象屬性並添加到父元素。

 var obj = {} $('.parent > div').each(function() { var type = $(this).data('type'); if (type == '') type = 'empty'; if (!obj[type]) obj[type] = []; obj[type].push($(this)) }) for (var i in obj) obj[i].sort(function(a, b) { return $(a).data('amount') - $(b).data('amount') }) $('.parent').empty(); var max = Object.keys(obj).reduce(function(r, e) { var l = obj[e].length; if (r == null || l > obj[r].length) r = e return r; }, null) obj[max].forEach(function(e, i) { Object.keys(obj).forEach(function(k) { if (k != 'empty' && obj[k][i]) $('.parent').append(obj[k][i]) }) }) $('.parent').append(...obj['empty']) $('.parent > div').each(function() { $(this).text($(this).data('amount') + ' ' + $(this).data('type')) }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="parent"> <div class="terminalpopular" data-amount="65.95" data-type="Recommended">…</div> <div class="terminalpopular" data-amount="70" data-type="Recommended">…</div> <div class="terminalpopular" data-amount="94.95" data-type="Recommended">…</div> <div class="terminalpopular" data-amount="67.99" data-type="Featured">…</div> <div class="terminalpopular" data-amount="75" data-type="Featured">…</div> <div class="terminalpopular" data-amount="78" data-type="Christmas">…</div> <div class="terminalpopular" data-amount="84.99" data-type="Christmas">…</div> <div class="terminalpopular" data-amount="54.95" data-type>…</div> <div class="terminalpopular" data-amount="84.99" data-type>…</div> </div>