Javascript jQuery/JS是否按字母顺序对用户列表进行分组排序？

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

基本上，我希望首先显示在线用户，其次显示不在线的用户，最后显示离线用户。每一组我都想按字母顺序排列。我的用户列表如下所示：

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

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

约翰
汤姆
玛丽

克里斯
彼得

我想把它们分类如下：

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

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

玛丽

汤姆
克里斯
约翰
彼得

我试着用答案作为我的出发点，但我就是无法将它们分组排序

谢谢

编辑：

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

尝试以下jquery代码：

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

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

看看这个小提琴：

试试这个jquery代码：

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

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

---

看看这把小提琴：

代码可能没有得到优化，但这是可行的

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

$（函数（）{
var mainObj={}；
var-arr=[]；
风险值状态=[“在线”、“离开”、“离线”]；
$（'.a'）。每个（函数（i，v）{//a是每个li的类
if（mainObj[$（this）.attr（'data-status'）]==未定义）{
mainObj[$（this.attr（'data-status'）]=[]；
}
mainObj[$（this.attr（'data-status'））].push（$（this.html（））；
})
var html=''；
对于（变量i=0；i'+mainObj[status[i]][j]+''；
}
};
$（“#他”）.append（html）；//他是一个新的ul
});

代码可能没有得到优化，但这是可行的

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

$（函数（）{
var mainObj={}；
var-arr=[]；
风险值状态=[“在线”、“离开”、“离线”]；
$（'.a'）。每个（函数（i，v）{//a是每个li的类
if（mainObj[$（this）.attr（'data-status'）]==未定义）{
mainObj[$（this.attr（'data-status'）]=[]；
}
mainObj[$（this.attr（'data-status'））].push（$（this.html（））；
})
var html=''；
对于（变量i=0；i'+mainObj[status[i]][j]+''；
}
};
$（“#他”）.append（html）；//他是一个新的ul
});

您可以使用以下内容：

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

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

var arrayStatus=[“远离”、“在线”、“离线”]；
$（“#分拣机”）。单击（功能（）{
var sortedList=$（'ul li'）.sort（函数（a，b）{
var chA=$（a）.data（'status'）；
var chB=$（b）.data（'status'）；
if（arrayStatus.indexOf（chA）arrayStatus.indexOf（chB））返回1；
返回0；
}).排序（功能（a、b）{
var chA=$（a）.data（'status'）；
var chB=$（b）.data（'status'）；
如果（chA==chB）{
if（$（a）.text（）<$（b）.text（））返回-1；
if（$（a）.text（）>$（b）.text（））返回1；
}
返回0；
});
$（'ul'）.empty（）；
$（'ul'）。追加（分类列表）；
});

它不可能比以前更快，因为使用了

排序

功能；但它工作得很好

---

工作提琴：

您可以使用以下内容：

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

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

var arrayStatus=[“远离”、“在线”、“离线”]；
$（“#分拣机”）。单击（功能（）{
var sortedList=$（'ul li'）.sort（函数（a，b）{
var chA=$（a）.data（'status'）；
var chB=$（b）.data（'status'）；
if（arrayStatus.indexOf（chA）arrayStatus.indexOf（chB））返回1；
返回0；
}).排序（功能（a、b）{
var chA=$（a）.data（'status'）；
var chB=$（b）.data（'status'）；
如果（chA==chB）{
if（$（a）.text（）<$（b）.text（））返回-1；
if（$（a）.text（）>$（b）.text（））返回1；
}
返回0；
});
$（'ul'）.empty（）；
$（'ul'）。追加（分类列表）；
});

它不可能比以前更快，因为使用了

排序

功能；但它工作得很好

---

工作小提琴：

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

//我没有像lintu那样动态创建数组，而是事先制作数组
var tempSort={online:[]，away:[]，offline:[]}；
$（'li'）。每个（函数（）{
//将数组[uid，name]插入到相应的状态数组中
tempSort[$（this.attr（'data-status'））].push（[$（this.attr（'data-uid'），$（this.text（））；
});
//按名称对每个状态块进行排序（第二个多维数组项）
for（临时排序中的var状态）{
tempSort[status].sort（函数（a，b）{if（a[1]b[1]）返回1；返回0；}）；
}

---

在这种排序之后，我只剩下一个排序的数组，我只是在

中迭代并相应地移动用户，我设法从中提取位