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
e

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

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>

因为列表不是有序的而且不是顺序的，所以进行排序的最简单方法是在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返回一个元素数组，所以本机排序方法将为您提供一个排序的选择器数组，您可以用它来替换列表的内容。

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

<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>

还有一点需要注意：我使用data-sort作为属性，因为浏览器会以不同的方式对以“data-”开头的属性进行处理，因此这不会导致验证问题。

///////编辑：

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

//// 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。

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

2 个答案: