一組元素的逆序

我有一套的div，看起來像這樣：一組元素的逆序

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

但我希望他們能夠翻轉，使其看起來像這樣：

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

使當一個div被添加時，它將進入列表的末尾......

我該怎麼做（或者是否有更好的方法來做到這一點）？

來源

2011-10-30 user1020293

_「所以，當添加一個div就會去到列表的末尾....」 _ - 是你的問題如何扭轉現有元素（下面的一些很好的答案），或者如何在特定地點添加新元素？從你想要的輸出開始，如果你添加了一個新的'

'，它應該低於1還是高於5？ – nnnnnn

包裹起來作爲一個很好的jQuery本功能離子任意一組選項可用：

$.fn.reverseChildren = function() { 
    return this.each(function(){ 
    var $this = $(this); 
    $this.children().each(function(){ $this.prepend(this) }); 
    }); 
}; 
$('#con').reverseChildren();

證明：http://jsfiddle.net/R4t4X/1/

編輯：固定於支持任意的jQuery選擇

來源

2011-10-30 13:05:09 Phrogz

+1易於閱讀，理解，維護和更改任何開發人員。 –

方式一：

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

來源

2011-10-30 01:38:49 Shad

+1爲簡潔起見。 –

沒有庫：

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的風格：

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

來源

2011-10-30 05:00:15 Saxoier

可愛的，但更多的工作和代碼比必要的。 – Phrogz

是的，當與下面的解決方案比較時，所有人都很難閱讀並更改和維護。 –

@Phrogz和Michael Durrant：如果你喜歡兩次以上的迴流，你可以[這個版本]（http://jsfiddle.net/akfHm/）。 – Saxoier

另一個（簡單？）香草的JavaScript響應：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]); 
}

或者，更短但效率更低的方法：http://jsfiddle.net/d9fNv/1/

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

來源

2011-10-30 23:06:16 Benjie

香草JS的解決方案：

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

}

來源

2016-06-16 13:25:34

一組元素的逆序

回答

相關問題