javascript - HTML 要素セットの逆順

Question

次のような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>ものが追加されると、リストの最後に移動します。

これを行うにはどうすればよいですか (または、これを行うためのより良い方法はありますか)?

score 18 · Accepted Answer

任意の選択セットで使用できる素敵な 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選択をサポートするように修正

score 6 · Accepted Answer

ライブラリなし：

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テスト

score 3 · Accepted Answer

一方通行：

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

score 0 · Accepted Answer

別の (より単純な?) バニラ 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);
});

javascript - HTML 要素セットの逆順

7 に答える 7

Related

Reference