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

这个函数似乎可以很好地根据ID对div进行排序：

JS

var div = $("
AA
"); div_id_after = Math.floor(parseFloat(div.get(0).id)); $('#'+div_id_after).after(div); 

HTML

 
a
 
b
 
c
 
d
 
e 

生产：

一个
b
C
AA
d
Ë

但是如果我想使用名为“order”的自定义属性呢？

该ID不应该是兼容性问题的数字，但同样的规则是否适用于自定义属性？

Answer 1

如果您尝试对自定义数据属性进行排序，这就是我过去所做的事情：

HTML：

 
 
I am number one
 
I am number seven
 
I am number twenty two
 
I am number two
  

因为列表不是有序的并且它不是顺序的，所以进行排序的最简单方法是在jQuery选择的数组上使用javascript的sort方法：

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返回一个元素数组，所以本机排序方法将为您提供一个排序的选择器数组，您只需用它替换列表的内容即可。

排序后，您的列表将如下所示：

 
 
I am number one
 
I am number two
 
I am number seven
 
I am number twenty two
  

还有一点需要注意：我使用data-sort作为属性，因为以“data-”开头的属性被浏览器区别对待，因此这不会导致validation问题。

///////编辑：

鉴于您的评论，这是另一种方法，无需更换整个arrays。 这几乎肯定会慢一点，需要精炼，我仍然建议使用上面的解决方案，但如果你想在不修改列表的情况下追加：

 //// This would happen inside a function somewhere var list = $('ul li'); var newItem = $('
'); // 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问题 。