使用數據ID的jQuery排序元素

Question

（對不起，如果問題已經存在）

我對jQuery開發很新。

我有HTML結構如下：

<div class="clist"> 
    <div data-sid=1></div> 
    <div data-sid=2></div> 
    <div data-sid=2></div> 
    <div data-sid=1></div> 
    <div data-sid=2></div> 
    <div data-sid=2></div> 
    <div data-sid=1></div> 
</div> 

我想作爲對它們進行排序：

<div class="clist"> 
    <div data-sid=1></div> 
    <div data-sid=1></div> 
    <div data-sid=1></div> 
    <div data-sid=2></div> 
    <div data-sid=2></div> 
    <div data-sid=2></div> 
    <div data-sid=2></div> 
</div> 

我使用的功能

function sortContacts() { 
var contacts = $('div.clist'), cont = contacts.children('div'); 

cont.detach().sort(function(a, b) { 
      var astts = $(a).data('sid'); 
      var bstts = $(b).data('sid') 
      //return astts - bstts; 
      return (astts > bstts) ? (astts > bstts) ? 1 : 0 : -1; 
     }); 

contacts.append(cont); 
} 

但它無法正常工作如預期的那樣。

它第一次運行良好，但是當添加新元素或更改data-sid時，它不起作用。

編輯：

演示

http://jsfiddle.net/f5mC9/1/

不工作？

Answer 1

您可以使用您希望將字符串轉換爲一個數字，你可以使用parseInt或+操作dataset屬性存儲所有的自定義元素的data-*屬性，它返回一個字符串，以備不時之需。

$('.clist div').sort(function(a,b) { 
    return a.dataset.sid > b.dataset.sid; 
}).appendTo('.clist'); 

http://jsfiddle.net/CFYnE/

是的，你的代碼在這裏工作，http://jsfiddle.net/f5mC9/

編輯：請注意，IE10！及以下不支持.dataset屬性，如果你想支持您可以使用jQuery的.data()方法，而不是所有的瀏覽器：

$('.clist div').sort(function(a,b) { 
    return $(a).data('sid') > $(b).data('sid'); 
}).appendTo('.clist'); 

Answer 2

$('.clist div').sort(function(a,b) { 
    return a.dataset.sid > b.dataset.sid ? 1 : -1; //be carefull, string comparaison 
}).appendTo('.clist'); 

也許

$('.clist div').sort(function(a,b) { 
    return parseInt(a.dataset.sid) - parseInt(b.dataset.sid); 
}).appendTo('.clist'); 

排序（）處理正/負回報;

Answer 3

更通用的功能，使用元素進行排序的jQuery：

$.fn.sortChildren = function (sortingFunction: any) { 

    return this.each(function() { 
     const children = $(this).children().get(); 
     children.sort(sortingFunction); 
     $(this).append(children); 
    }); 

}; 

用法：

$(".clist").sortChildren((a, b) => a.dataset.sid > b.dataset.sid ? 1 : -1);