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>添加新的时，它会转到列表的末尾。

我该怎么做（或者有更好的方法）？

Answer 1

一个普通的 JS 解决方案：

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

Answer 2

总结为一个很好的 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 选择

Answer 3

我发现以上所有内容都不令人满意。这是一个香草 JS 单线：

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

带有解释的片段：

// 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", i.e. 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 4

没有图书馆：

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 测试

Answer 5

单程：

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

Answer 6

另一个（更简单？）香草 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);
});

Answer 7

早在 2011 年，当有人问这个问题时，Flexbox 才出现了 1-2 年，而且支持不是很好，但现在是 2020 年，情况有了很大改善，所以你可以只使用 CSS 来做到这一点！

您可以尝试使用 Flexbox 的flex-direction: column-reverse：

ul {
  display: flex;
  flex-direction: column-reverse;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

如果您想在一个更完整的示例中看到这一点，该示例在column和之间column-reverse动态切换，请检查另一个问题：如何在“onclick”上颠倒 div 元素的顺序？