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

2019-10-10 05:41:46 阅读：163 来源： 互联网

标签：javascript jquery sql-order-by jquery-selectors

此功能对于根据ID对div进行排序似乎效果很好：

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
C
AA
d
Ë

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

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

解决方法:

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

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返回一个元素数组,因此本机sort方法将为您提供选择器的排序数组,您可以使用它们替换列表中的内容.

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

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

标签：javascript,jquery,sql-order-by,jquery-selectors
来源： https://codeday.me/bug/20191010/1884738.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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