Question

我有一个我正在显示的用户列表。我的问题是，我如何按字母顺序排序，但是在在线状态组中。

基本上我希望首先显示在线用户，排在第二位的用户和离线用户。我希望按字母顺序对每个组进行排序。我的用户列表如下所示：

<ul>
   <li data-uid="x" data-status="away">John</li>
   <li data-uid="x" data-status="online">Tom</li>
   <li data-uid="x" data-status="online">Mary</li>
   <li data-uid="x" data-status="offline">Xiang</li>
   <li data-uid="x" data-status="away">Chris</li>
   <li data-uid="x" data-status="offline">Peter</li>
   <li data-uid="x" data-status="online">Matt</li>
</ul>

我希望他们能像这样排序：

<ul>
   <li data-uid="x" data-status="online">Mary</li>
   <li data-uid="x" data-status="online">Matt</li>
   <li data-uid="x" data-status="online">Tom</li>
   <li data-uid="x" data-status="away">Chris</li>
   <li data-uid="x" data-status="away">John</li>
   <li data-uid="x" data-status="offline">Peter</li>
   <li data-uid="x" data-status="offline">Xiang</li>
</ul>

我尝试使用this回答作为我的起点，但我无法将它们分组排序..

由于

编辑：

此外，我正在使用ajax提取实时状态更新。我不确定这会如何影响这个功能，但也许以后可能只针对特定用户并相应地移动他？...

Answer 1

试试这个jquery代码：

var array = ["away", "online", "offline"]

$.each(array, function(key, value) {
    $('li[data-status="'+value+'"]').appendTo('ul')
});

看看这个小提琴：http://jsfiddle.net/vRz3X/1/

Answer 2

代码可能无法优化，但这可行..

    $(function () {
        var mainObj = {};
        var arr = [];
        var status = ["online", 'away', 'offline'];
        $('.a').each(function (i, v) { // a is the class for each li
            if (mainObj[$(this).attr('data-status')] == undefined) {

                mainObj[$(this).attr('data-status')] = [];

            }
            mainObj[$(this).attr('data-status')].push($(this).html());
        })

        var html = '';
        for (var i = 0; i < status.length; i++) {
            mainObj[status[i]].sort();

            for (var j in mainObj[status[i]]) {
                html += '<li class=\"a\" data-status=\"' + status[i] + '\" >' + mainObj[status[i]][j] + '</li>';

            }

        };
        $("#he").append(html); //he is a new ul
    });

Answer 3

您可以使用以下内容：

var arrayStatus = ["away", "online", "offline"];

$("#sorter").click(function () {
    var sortedList = $('ul li').sort(function (a, b) {
        var chA = $(a).data('status');
        var chB = $(b).data('status');        
        if (arrayStatus.indexOf(chA) < arrayStatus.indexOf(chB)) return -1;
        if (arrayStatus.indexOf(chA) > arrayStatus.indexOf(chB)) return 1;
        return 0;
    }).sort(function (a, b) {
        var chA = $(a).data('status');
        var chB = $(b).data('status');        
        if (chA == chB){
            if ($(a).text()< $(b).text()) return -1;
            if ($(a).text()> $(b).text()) return 1;
        }
        return 0;
    });
    $('ul').empty();    
    $('ul').append(sortedList);
});

由于在arrays上使用sort功能，因此不可能更快;但它运作得很好。

工作小提琴：http://jsfiddle.net/IrvinDominin/seEMJ/

Answer 4

我设法从每个答案中取出一些内容，将它与StackOverflow上的其他答案结合起来，这就是我想出的：

// instead of creating on the fly like lintu, I make the arrays beforehand
var tempSort = {online:[],away:[],offline:[]};

$('li').each(function() {
    // insert array [uid, name] into corresponding status array
    tempSort[$(this).attr('data-status')].push([$(this).attr('data-uid'), $(this).text()]);
});

// sort each status block by name (second multidimensional array item)
for(var status in tempSort) {
    tempSort[status].sort(function(a, b) { if (a[1]<b[1]) return -1; if (a[1]>b[1]) return 1; return 0; });
}

在这种排序后，我留下了一个排序数组，我只是迭代并在<ul>中相应地移动用户。

jQuery / JS按组的字母顺序排序用户列表？

4 个答案: