如何根据自定义属性来订购动态创建的元素？

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。