How to order dynamically created elements based on

Question

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?

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

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