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

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> 中对其进行迭代并相应地移动用户。