使用CSS或jQuery对div进行反向排序？

我有以下资料：

<div>
    <div>
        <span>Fe</span>
        <span>Fi</span>
        <span>Fo</span>
        <span>Fum</span>
    </div>


    <div>
        <span>He</span>
        <span>Hi</span>
        <span>Ho</span>
        <span>Hum</span>
    </div>
</div>

铁
Fi
法罗群岛
烟
他
你好
霍
哼

我希望内部div以相反的顺序显示，如下所示：

他嗨呵呵哼

---

向营救人员收取Fum的费用。

您可以交换这两个节点。这是一个例子。此外，您可能还可以为它们指定唯一的id名称，以简化选择器。

一种方法是：

$('div span:contains("He")').parent().insertBefore('div > div:eq(0)');

相反，您也可以只使用CSS来模拟“反向”顺序：

div > div {
    width: 48%;
    float: right;
}

div > div:nth-child(odd) {
    background-color: #ffa;
}

div > div:nth-child(even) {
    background-color: #0f0;
}

参考资料：

---

试试这样的方法：

$($("span").remove().toArray().reverse()).appendTo("div");

---

编辑：要处理多个元素，可以执行以下操作：

$('div > div').each(function() {
    $(this).prependTo(this.parentNode);
});

---

实时示例：

给每个div一个id，并使用insertBefore。例如：

$('#hehihohum').insertBefore('#fefifofum');

---

您很抱歉，示例结果实际上并没有颠倒排序顺序。它只是交换两个

元素的顺序。这就是你想要的吗？@Patrick:是的，这就是我想要实现的，对，我就是这么做的。你的jQuery解决方案在视觉上是有效的，但我很确定OP希望将它们保持在同一个外部分区中。目前它正将其置于外部分区之外。您需要将选择器更改为

.insertBefore（'div:eq（1））

或

.insertBefore（'div>div:eq（0）

或使用

.prependTo（'div:eq（0）

@patrick dw:谢谢！这就是我想做的，但我完全忘记了它们被控制住了……唉。必须读得更慢更仔细。。。编辑此版本是提供的最简单和最通用的版本。谢谢如果有3或4个div以相反的顺序列出，这可以进一步推广吗？@user113716你知道这是否适用于有序的列表元素，而不改变它们的数值吗？我喜欢你的头像，家庭电影太棒了。

$('#hehihohum').insertBefore('#fefifofum');