Question

I have the following code:

var div = $("<div id='3.5'>AA</div>");
div_id_after = Math.floor(parseFloat(div.get(0).id));

$('#'+div_id_after).after(div);


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

This will produce the divs in this order:

a
b
c
AA
d
e

Clearly, it is not proper to use a number as an ID for IE/netscape compatibility issues, but bear with me.

If you have divs which are created with a custom attribute “order”, where the value of this attribute is a TimeStamp:

<div order='2011-05-13 15:57:09'>a</div>
<div order='2011-05-14 11:23:02'>b</div>
<div order='2011-05-19 10:12:11'>c</div>
<div order='2011-06-10 12:39:37'>d</div>
<div order='2011-06-12 13:47:17'>e</div>

And, as in the code above you have an element:

var div = $("<div object='2011-05-19 17:46:21'>AA</div>");

How would you order these items, like the example above?

Answer 1

Something like this (assumes that there is a parent div wrapping all of your items, id’d ‘container’).

$(document).ready(function(){
  $('#sort_me').click(doOrder);
});

function orderSort(a,b)
{
   return ($(a).attr('order') > $(b).attr('order')) ? 1 : -1;
}

function doOrder()
{
   var orderable = [];
   $('div[order]').each(function(idx,el){
      orderable.push(el);
   });
   orderable.sort(orderSort);
   for (var i=0; i < orderable.length;i++)
   {
        // Somewhat slow way of doing this.  Should be fine until you
        // get above 200 entries or so.  There are other ways which may 
        // be faster, but I thought this was good for explanation.
        $('#container').append(orderable[i]);
   }
} 

---

added:
Forgot to add my fiddle: http://jsfiddle.net/fUC2A/3/