How to order dynamically created elements based on a custom attribute? [closed]

问题

It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.

Closed 8 years ago.

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>

Produces:

a
b
c
AA
d
e

But what if I would like to use a custom attribute titled "order"?

The ID should not be a number for compatibility issues, but does this same rule apply to custom attributes?

回答1:

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>

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:

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

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>

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.

/////// EDIT:

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

回答2:

It looks like TinySort will do what you want.

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

Also of interest after a quick google search is another SO Question.

来源：https://stackoverflow.com/questions/6076820/how-to-order-dynamically-created-elements-based-on-a-custom-attribute