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

看看这个 fiddle :http://jsfiddle.net/vRz3X/1/