I have a set of divs that looks like this:
<div id="con">
<div> 1 </div>
<div> 2 </div>
<div> 3 </div>
<div> 4 </div>
<div> 5 </div>
</div>
But I want them to flip so that it looks like this:
<div> 5 </div>
<div> 4 </div>
<div> 3 </div>
<div> 2 </div>
<div> 1 </div>
So that when a new <div>
is added it goes to the end of the list.
How can I do this (or is there a better way of doing this)?
Wrapped up as a nice jQuery function available on any set of selections:
$.fn.reverseChildren = function() {
return this.each(function(){
var $this = $(this);
$this.children().each(function(){ $this.prepend(this) });
});
};
$('#con').reverseChildren();
Proof: http://jsfiddle.net/R4t4X/1/
Edit: fixed to support arbitrary jQuery selections