如何通过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