javascript - 按类别中的属性对 div 进行排序

Question

我尝试使用属性 data-name 和 jquery 来对任何 div 进行排序或 每个房间的 javascript。

html喜欢如下: 我只想从 A-Z 排序用户名 div。 我怎样才能做到这一点？ 非常感谢您的帮助。

<div id="room_1">
  <div class="roomheader"></div>
  <div class="userlist" data-name="Blue"></div>
  <div class="userlist" data-name="Zoosa"></div>
  <div class="userlist" data-name="Any"></div>
</div>

<div id="room_2">
  <div class="roomheader"></div>
  <div class="userlist" data-name="Blue"></div>
  <div class="userlist" data-name="Zoosa"></div>
  <div class="userlist" data-name="Any"></div>
</div>

<div id="room_3">
  <div class="roomheader"></div>
  <div class="userlist" data-name="Blue"></div>
  <div class="userlist" data-name="Zoosa"></div>
  <div class="userlist" data-name="Any"></div>
</div>

...

Answer 1

function SortByName(a, b){
    var aName = a.toLowerCase();
    var bName = b.toLowerCase(); 
    return ((aName < bName) ? -1 : ((aName > bName) ? 1 : 0));
}

function sortDiv(target,divs){
    var tempArray = [];

    $(divs).each(function(i,o){
    tempArray.push($(o).data('name'));
});

   tempArray.sort(SortByName);


    $(tempArray).each(function(i,o){
        target.append(target.find('.userlist[data-name='+o+']'));
    });

}

$(document).ready(function(){
    sortDiv( $('#room_1'),$('#room_1').find('.userlist'));
});

恶魔:

http://jsfiddle.net/ynhpwvL9/