如何基于自定义属性对动态创建的元素进行排序? [英] How to order dynamically created elements based on a custom attribute?
问题描述
此功能对于根据ID对div进行排序似乎效果很好:
This function seems to work fairly well for sorting divs based on ID:
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>
产生:
a
b
c
AA
d
a
b
c
AA
d
e
但是,如果我想使用标题为"order"的自定义属性怎么办?
But what if I would like to use a custom attribute titled "order"?
该ID不应是用于兼容性问题的数字,但是此相同规则是否适用于自定义属性?
推荐答案
如果您尝试对自定义数据属性进行排序,这就是我过去所做的事情:
If you're trying to sort on a custom data attribute, here's what I've done in the past:
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方法:
Because the list isn't in order and it's not sequential, the easiest way to do the sort is to use javascript's sort method on a jQuery selected array:
javascript:
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方法将为您提供选择器的排序数组,您可以使用它们替换列表中的内容.
Because jQuery returns an array of elements, the native sort method will give you a sorted array of selectors that you can just replace the contents of the list with.
排序后,您的列表将如下所示:
After the sort, your list will look like this:
<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-"开头的属性被浏览器区别对待,因此不会引起验证问题.
One thing to note as well: I use data-sort as the attribute, because attributes that start with "data-" are treated differently by browsers, so this won't cause validation issues.
///////
给出您的评论,这是另一种无需替换整个数组的方法.几乎可以肯定这会比较慢并且需要改进,我仍然建议使用上述解决方案,但是如果您想在不修改列表的情况下追加:
Given your comment, here's another way to do it without replacing the entire array. This will almost certainly be slower and require refining, I would still recommend using the above solution, but if you wanted to append without modifying the list:
//// 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);
}
});
这篇关于如何基于自定义属性对动态创建的元素进行排序?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!