jQuery/JS按字母順序排序用戶列表中的組？

我有我正在顯示的用戶列表。我的問題是，我如何按照字母順序對它們進行排序，但是按照在線狀態組排列。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>

我使用this答案，因爲我的出發點試過，但我可以」牛逼設法讓他們在羣體分類..

感謝

編輯：

另外，我正在使用ajax提供實時狀態更新。我不知道這會如何影響功能，但也許有可能以後只針對特定用戶並相應地移動他..

來源

2013-07-19 Matt

只是連接數據狀態和li.innerText並對其進行排序。簡單... – davewasthere

我設法採取位出每個答案的，與其他的答案在這裏結合其在計算器上，這就是我想出了：

// 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-19 14:24:37 Matt

試試這個jQuery代碼：

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

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

而且有看此琴：http://jsfiddle.net/vRz3X/1/

來源

2013-07-19 11:55:17

它似乎是按* a *排序，* o * nline，* o * ffline – Matt

因此它不是字母順序。 –

我編輯了我的代碼並更改了小提琴鏈接。 –

代碼可能不是最優的，但這個工程..

$(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-19 12:38:04 lintu

您可以使用這樣的事情：

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函數arrays;但它工作得很好。

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

來源

2013-07-19 13:59:42

jQuery/JS按字母順序排序用戶列表中的組？

回答

相關問題