Reverse item set order

Question

I have a set of div 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, when a div is added, it will go to the end of the list.

How can I do this (or is there a better way to do this)?

Answer 1

Completed as a good jQuery function available for any set of parameters:

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

Answer 2

JS Vanilla Solution:

 function reverseChildren(parent) { for (var i = 1; i < parent.childNodes.length; i++){ parent.insertBefore(parent.childNodes[i], parent.firstChild); } } 

Answer 3

without library:

 function reverseChildNodes(node) { var parentNode = node.parentNode, nextSibling = node.nextSibling, frag = node.ownerDocument.createDocumentFragment(); parentNode.removeChild(node); while(node.lastChild) frag.appendChild(node.lastChild); node.appendChild(frag); parentNode.insertBefore(node, nextSibling); return node; } reverseChildNodes(document.getElementById('con')); 

JQuery style:

 $.fn.reverseChildNodes = (function() { function reverseChildNodes(node) { var parentNode = node.parentNode, nextSibling = node.nextSibling, frag = node.ownerDocument.createDocumentFragment(); parentNode.removeChild(node); while(node.lastChild) frag.appendChild(node.lastChild); node.appendChild(frag); parentNode.insertBefore(node, nextSibling); return node; }; return function() { this.each(function() { reverseChildNodes(this); }); return this; }; })(); $('#con').reverseChildNodes(); 

jsPerf Test

Answer 4

One of the methods:

 function flip(){ var l=$('#con > div').length,i=1; while(i<l){ $('#con > div').filter(':eq(' + i + ')').prependTo($('#con')); i++; } } 

Answer 5

I found all of the above somehow unsatisfactory. Here is one JS vanilla:

 parent.append(...Array.from(parent.childNodes).reverse()); 

Fragment with explanations:

 // Get the parent element. const parent = document.getElementById('con'); // Shallow copy to array: get a 'reverse' method. const arr = Array.from(parent.childNodes); // 'reverse' works in place but conveniently returns the array for chaining. arr.reverse(); // The experimental (as of 2018) 'append' appends all its arguments in the order they are given. An already existing parent-child relationship (as in this case) is "overwritten", ie the node to append is cut from and re-inserted into the DOM. parent.append(...arr); 

 <div id="con"> <div> 1 </div> <div> 2 </div> <div> 3 </div> <div> 4 </div> <div> 5 </div> </div> 

Answer 6

Another (simpler?) Vanilla javascript answer: http://jsfiddle.net/d9fNv/

 var con = document.getElementById('con'); var els = Array.prototype.slice.call(con.childNodes); for (var i = els.length -1; i>=0; i--) { con.appendChild(els[i]); } 

Alternatively, a shorter but less efficient method: http://jsfiddle.net/d9fNv/1/

 var con = document.getElementById('con'); Array.prototype.slice.call(con.childNodes).reverse().forEach(function(el) { con.appendChild(el); });