Jquery 如何根据自定义属性对动态创建的元素进行排序？

对于基于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

产生：

a
b
c
AA
d
e

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

对于兼容性问题，ID不应该是一个数字，但这条规则是否适用于自定义属性？

它看起来可以满足您的需要

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

---

在谷歌快速搜索之后，还有一个有趣的问题。

如果您试图对自定义数据属性进行排序，下面是我过去所做的：

html:

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

我是第一
我是第二名
我是第七名
我是22号

还有一点需要注意：我使用数据排序作为属性，因为浏览器对以“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);
    }
});

///这可能发生在函数内部的某个地方
变量列表=$（'ul li'）；
var newItem=$（“
”）；//我想你会从什么地方得到这个
$。每个（列表、函数（索引、项）{
var prev=parseFloat（$（item）.attr（'data-sort'）；
var next=parseFloat（$（list[index+1]）.attr（'data-sort'）；
var current=parseFloat（newItem.attr（'data-sort'））；
如果（上一个当前| | isNaN（下一个）））{
$（项目）。在（新项目）之后；
}否则如果（当前>上一个）{
$（项目）。在（新项目）之前；
}
});

我确信这是一个偏好问题，但我个人不会为此使用插件-jQuery返回一个数组，这非常适合排序。保持javascript的轻量级，除非绝对必要，否则不要使用插件。也就是说，做你想做的事，除非我以后必须维护你的代码。我真的在寻找一些动态创建的对象将以正确的方式附加（无论是在之后还是之前）的东西location@Jesse，我大体上同意插件地狱是要避免的，但在本例中，插件非常小，代码非常容易阅读，因此它似乎是KISS和DRY方法的恰当使用。但是无论如何，泰勒马克，做你认为适合你的代码的事情。这似乎很有效。如果在调用sort函数之前将对象附加到.sortList，它也会对该对象进行排序。如果在调用函数后创建具有单击事件的对象，则需要再次运行此函数才能调用。我正在寻找一种不需要在每次引入新对象时都创建数组的方法。我在答案中添加了另一种解决方案，但老实说，我想不出哪种情况下sort（）不是解决问题的最快/最干净的解决方案。您可以任意多次运行它，而且它不会弄乱元素上或元素周围的任何东西。

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

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

<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);
    }
});