Đảo ngược trình tự của một tập hợp các yếu tố

Question

tôi có một tập hợp các div trông như thế này:

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

Nhưng tôi muốn họ để lật để nó trông như thế này:

<div> 5 </div> 
<div> 4 </div> 
<div> 3 </div> 
<div> 2 </div> 
<div> 1 </div> 

Vì vậy mà khi một div được thêm vào nó sẽ đi đến cuối danh sách ....

Làm cách nào để tôi thực hiện việc này (hoặc có cách nào tốt hơn để thực hiện việc này)?

Answer 1

Wrapped lên như một jQuery funct đẹp ion có sẵn trên bất kỳ tập hợp các lựa chọn:

$.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: cố định để hỗ trợ lựa chọn jQuery tùy ý

Answer 2

Một cách:

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

Answer 3

mà không có một thư viện:

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

khác (đơn giản hơn?) vani javascript phản ứng: 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]); 
} 

Cách khác, phương pháp ngắn hơn nhưng kém hiệu quả hơn: http://jsfiddle.net/d9fNv/1/

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

Answer 5

Một giải pháp vani JS:

function reverseEls(elem){ 
     for (var i=0;i<elem.childNodes.length;i++) 
      elem.insertBefore(elem.childNodes[i], elem.firstChild); 

}