Invert order of HTML elements

Question

I have the following configuration:

<div><div id='box1'>&nbsp;</div><div id='box2'>&nbsp;</div><div id='box3'>&nbsp;</div><div id='box4'>&nbsp;</div></div>

what i need to do is to invert the order of the divs

<div><div id='box4'>&nbsp;</div><div id='box3'>&nbsp;</div><div id='box2'>&nbsp;</div><div id='box1'>&nbsp;</div></div>

is there a fast way to do this with jQuery without cloning, removing and replacing the items?

Answer 1

I guess you're looking for jQuery Reverse Order plugin.

Answer 2

You could use the jQuery TinySort plugin to order the items by class name (descending)...

http://plugins.jquery.com/project/TinySort

Answer 3

Try this:

$top = $('div#thatTopDiv');
$top.children('div').slice(1).each(function() {
    $(this).insertBefore($top.children().eq(0));
});

Edit: Tested and this works.