1

我有一个正在显示的用户列表。我的问题是,我如何按字母顺序对它们进行排序,但要以在线状态组的形式进行排序。

基本上我希望首先显示在线的用户,其次是离开的用户,最后是离线的用户。我希望按字母顺序对这些组中的每一个进行排序。我的用户列表如下所示:

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

我已经尝试使用这个答案作为我的起点,但我无法将它们分组排序..

谢谢

编辑:

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

4

4 回答 4

1

试试这个 jquery 代码:

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

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

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

于 2013-07-19T11:55:17.467 回答
0

代码可能未优化,但这有效..

    $(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
    });
于 2013-07-19T12:38:04.003 回答
0

你可以使用这样的东西:

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

由于在数组sort上使用函数,它不可能更快;但它工作得很好。

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

于 2013-07-19T13:59:42.517 回答
0

我设法从每个答案中提取一些信息,并将其与 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>.

于 2013-07-19T14:24:37.187 回答