如何根據自定義屬性來訂購動態創建的元素？

Question

這個功能似乎運作得相當好基於ID進行排序的div：

JS

var div = $("<div id='3.5'>AA</div>"); 
div_id_after = Math.floor(parseFloat(div.get(0).id)); 

$('#'+div_id_after).after(div); 

HTML

<div id='1'>a</div> 
<div id='2'>b</div> 
<div id='3'>c</div> 
<div id='4'>d</div> 
<div id='5'>e</div> 

產地：

一個
b
Ç
AA
d
Ë

但如果我想用標題爲「令」自定義屬性？

該ID不應該是兼容性問題的編號，但是這個相同的規則是否適用於自定義屬性？

Answer 1

如果你想進行排序的自定義數據屬性，這裏就是我在過去所做的那樣：

HTML：

<ul class="sortList"> 
    <li data-sort="1">I am number one</li> 
    <li data-sort="7">I am number seven</li> 
    <li data-sort="22">I am number twenty two</li> 
    <li data-sort="2">I am number two</li> 
</ul> 

因爲列表不是爲了和它的不連續的，這樣做的那種最簡單的方法是使用JavaScript的排序方法一個jQuery選擇陣列上：

的javascript：

var list = $('.sortList'); 
var listItems = list.find('li').sort(function(a,b){ return $(a).attr('data-sort') - $(b).attr('data-sort'); }); 
list.find('li').remove(); 
list.append(listItems); 

因爲jQuery返回一個元素數組，所以本地排序方法會給你一個排序數組的選擇器，你可以用列表的內容來替換它。

排序後，您的名單將是這樣的：

<ul class="sortList"> 
    <li data-sort="1">I am number one</li> 
    <li data-sort="2">I am number two</li> 
    <li data-sort="7">I am number seven</li> 
    <li data-sort="22">I am number twenty two</li> 
</ul> 

有一點要注意的還有：我使用數據排序的屬性，因爲以「數據 - 」區別對待啓動屬性通過瀏覽器，所以這不會導致驗證問題。

///////編輯：

考慮您的意見，這裏是另一種方式來做到這一點無需更換整個陣列。這幾乎肯定會慢一些，需要提煉，我仍然建議使用上述解決方案，但如果你想在不修改清單追加：

//// This would happen inside a function somewhere 
var list = $('ul li'); 
var newItem = $('<li data-sort="7"></li>'); // I assume you will be getting this from somewhere 
$.each(list,function(index,item){ 
    var prev = parseFloat($(item).attr('data-sort')); 
    var next = parseFloat($(list[index+1]).attr('data-sort')); 
    var current = parseFloat(newItem.attr('data-sort')); 
    if(prev <= current && (next > current || isNaN(next))){ 
     $(item).after(newItem); 
    } else if(current > prev){ 
     $(item).before(newItem); 
    } 
}); 

Answer 2

它看起來像TinySort會做你想做的。

$("ul").tsort({attr:"order"}); 

快速谷歌搜索後還感興趣的是另一個SO Question。