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

作为一个很好的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 2

没有图书馆：

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

Answer 3

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

Answer 4

一种方式：

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

Answer 5

早在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之间动态切换，请检查以下其他问题：How can I reverse the order of div elements upside down on 'onclick'?

Answer 6

另一个（更简单？）vanilla 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

我发现上述所有内容都不令人满意。这是香草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>

一组元素的反向顺序

7 个答案: