I have the following configuration: <div><div id='box1'> </div><div id='box2'> </div><div id='box3'> </div><div id='box4'> </div></div> what i need to do is to invert the order of the divs <div><div id='box4'> </div><div id='box3'> </div><div id='box2'> </div><div id='box1'> </div></div> is there a fast way to do this with jQuery without cloning, removing and replacing the items?

Reputation: 31249

Invert order of HTML elements

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?

Upvotes: 1

Reputation: 546005

Try this:

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

Edit: Tested and this works.

Upvotes: 5

Reputation: 250872

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

Upvotes: 0

Reputation: 10091

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

Upvotes: 3