Question

我有以下内容：

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

我希望内部div以相反的顺序显示：

何嗨哼哼 Fee Fi Fo Fum

Answer 1

var first = $('div > div:first-child');

first.appendTo(first.parent());

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

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

直播示例： http://jsfiddle.net/xB4sB/

Answer 2

一种方法是：

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

JS Fiddle demo

相反，您也可以通过CSS来模拟“反向”顺序：

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

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

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

JS Fiddle demo

参考文献：

Answer 3

您可以交换两个节点using this method。这是一个live demo。您也可以为它们提供唯一的ID名称以简化选择器。

Answer 4

jQuery Sortable救援。

Answer 5

尝试这样的事情：

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

Answer 6

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

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

jsFiddle

使用CSS或jQuery反向排序div？

6 个答案: