如何通過jquery由兩個不同的參數對div進行排序

Question

我的頁面中有以下內容來自動態數據庫。 我的DIV結構是這樣的：

<div class="status_quotes" data-quote="19" data-status="certified"></div> 
<div class="status_quotes" data-quote="15" data-status="un_certified"></div> 
<div class="status_quotes" data-quote="8" data-status="un_certified"></div> 
<div class="status_quotes" data-quote="5" data-status="certified"></div> 
<div class="status_quotes" data-quote="14" data-status="un_certified"></div> 
<div class="status_quotes" data-quote="9" data-status="certified"></div> 

我想它以這種方式首先，我會得到所有的「認證」數據狀態的div顯示進行排序，然後將所有「un_certified」來顯示，但也我想它的「數據引號」的數字在增加秩序。最終的div會顯示這樣的排序：

// first the certified quotes sorted with "data-quote" 
<div class="status_quotes" data-quote="5" data-status="certified"></div> 
<div class="status_quotes" data-quote="9" data-status="certified"></div> 
<div class="status_quotes" data-quote="19" data-status="certified"></div> 
// uncertified quotes sorted with "data-quote" 
<div class="status_quotes" data-quote="8" data-status="un_certified"></div> 
<div class="status_quotes" data-quote="14" data-status="un_certified"></div> 
<div class="status_quotes" data-quote="15" data-status="un_certified"></div> 

任何幫助，將不勝感激。 在此先感謝

Answer 1

我改變了代碼片斷，我添加orderByThenBy抽象排序邏輯，也是我留在舊代碼之前

var $divs = $('div.status_quotes'); 
 
var orderByThenBy = [ 
 
    { "attr": 'data-status', 'typeFunc': null }, 
 
    { "attr": 'data-quote', 'typeFunc':function (v) { return parseInt(v); } } 
 
]; 
 
$divs.sort(function (x, y) { 
 
    for (var i = 0; i < orderByThenBy.length; i++) { 
 
     var vx = $(x).attr(orderByThenBy[i].attr); 
 
     var vy = $(y).attr(orderByThenBy[i].attr); 
 
     var typeFunc = orderByThenBy[i].typeFunc; 
 
     if (typeFunc != null) { 
 
      vx = typeFunc(vx); 
 
      vy = typeFunc(vy); 
 
     } 
 
     if (vx !== vy) { 
 
      return vx > vy ? 1 : -1; 
 
     } 
 
    } 
 
    return 0; 
 
}); 
 
//$divs.sort(function (x, y) { 
 
// var statusX = $(x).attr("data-status"); 
 
// var statusY = $(y).attr("data-status"); 
 
// if (statusX == statusY) { 
 
//  var quoteX = parseInt($(x).attr("data-quote")); 
 
//  var quoteY = parseInt($(y).attr("data-quote")); 
 
//  return quoteX > quoteY ? 1 : -1; 
 
// } 
 
// else { 
 
//  return statusX > statusY ? 1 : -1; 
 
// } 
 
//}); 
 
$divs.each(function (i, n) { 
 
    console.info(n); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="status_quotes" data-quote="19" data-status="certified"></div> 
 
<div class="status_quotes" data-quote="15" data-status="un_certified"></div> 
 
<div class="status_quotes" data-quote="8" data-status="un_certified"></div> 
 
<div class="status_quotes" data-quote="5" data-status="certified"></div> 
 
<div class="status_quotes" data-quote="14" data-status="un_certified"></div> 
 
<div class="status_quotes" data-quote="9" data-status="certified"></div>

Answer 2

我的建議：

1. 排序由數量的div。
2. 拆分2個列表中的div（認證和未認證）
3. 返回一個列表，從認證列表開始，以un_certified列表結束。

var divs = $('div'); 
 
var sorted_by_number = divs.sort(function (a, b) { 
 
    return $(a).attr("data-quote") - $(b).attr("data-quote") 
 
}); 
 
var finally_sorted = (function() { 
 
    var certified = sorted_by_number.filter(function (index, item) { 
 
     return $(item).attr("data-status") == "certified" 
 
    }); 
 
    var uncertified = sorted_by_number.not(certified); 
 
    return $.merge(certified,uncertified); 
 
})(); 
 

 
finally_sorted.each(function(i,el){ 
 
    var e = $(el) 
 
    console.log(e.attr("data-status"),e.attr("data-quote")); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="status_quotes" data-quote="19" data-status="certified"></div> 
 
<div class="status_quotes" data-quote="15" data-status="un_certified"></div> 
 
<div class="status_quotes" data-quote="8" data-status="un_certified"></div> 
 
<div class="status_quotes" data-quote="5" data-status="certified"></div> 
 
<div class="status_quotes" data-quote="14" data-status="un_certified"></div> 
 
<div class="status_quotes" data-quote="9" data-status="certified"></div>

fiddle