Question

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

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

_ttl

...

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/

Answer 2

你可以这样做，

$("#room_1 .userlist").sort(function (first, second) {    
    return $(first).data('name') > $(second).data('name');
}).appendTo($("#room_1"));

`DEMO`

Answer 3

我已经在jsfiddle中完成了排序，请通过以下链接 http://jsfiddle.net/jnLLLtt4/4/

$(document).ready(function () {
    sortData("room_1");
});

function sortData(divId){
var arr = new Array();
    $("#"+divId+" div.userlist").each(function(){
        arr.push($(this).attr('data-name'));
    });
    arr = arr.sort();
var prevdiv='';
    $.each(arr,function(key, val){
        if(prevdiv!=''){
            $cloned = $("#"+divId+" div.userlist[data-name="+val+"]").clone();
        $("#"+divId+" div.userlist[data-name="+val+"]").remove()
            $cloned.insertAfter("#"+divId+" div.userlist[data-name="+prevdiv+"]");
        }else{
            $cloned = $("#"+divId+" div.userlist[data-name="+val+"]").clone();
                $("#"+divId+" div.userlist[data-name="+val+"]").remove();
                $cloned.insertAfter("#"+divId+" div.roomheader");
        }
        prevdiv=val;
    });
}

Answer 4

您只需获取所有项目，使用自定义比较器的.sort()函数对其进行排序，然后将它们追加到初始容器中。

＆＃13;

$(".room").each(function() { // For every room
  var users = $(this).find(".userlist"); // Take every user in a room
  if (users.length === 0) return;
  
  users.sort(function(a, b) { // Sort them out
    var aText = $(a).data("name");
    var bText = $(b).data("name");
    
    if (aText < bText) return -1;
    if (aText > bText) return 1;
    return 0;
  });
  
  users.each(function() {
    $(this).parent().append(this); // Append them back in a new order
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="room" id="room_1">
  <div class="roomheader"></div>
</div>

<div class="room" id="room_2">
  <div class="roomheader"></div>
  <div class="userlist" data-name="Blu_e">Blu_e</div>
  <div class="userlist" data-name="Zo-osa">Zo-osa</div>
  <div class="userlist" data-name="Any">Any</div>
</div>

<div class="room" id="room_3">
  <div class="roomheader"></div>
  <div class="userlist" data-name="Blue">Blue</div>
  <div class="userlist" data-name="Zoosa">Zoosa</div>
  <div class="userlist" data-name="Any">Any</div>
</div>

＆＃13;

在MDN上阅读有关Array.prototype.sort()功能的更多信息实际上，在这个例子中，它是由jQuery对象代理的，但它并不重要：）

按类别中的属性排序div

4 个答案:

`DEMO`