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>

我希望以这种方式排序，首先我将获得所有＆＃34;认证＆＃34; data-status div显示然后全部＆＃34; un_certified＆＃34;显示，但我也希望它按＆＃34; data-quote＆＃34;排序。按升序排列的数字。结果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添加到抽象排序逻辑中，我之前仍保留旧代码

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

我的建议：

按编号对div进行排序。
将div分成2个列表（已认证和未经认证）
返回一个列表，从认证列表开始，以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

如何通过jquery按两个不同的参数对div进行排序

2 个答案: