对多个div中的html进行重新排序(jQuery)

Question

我正在使用jQuery对一个不可编辑的页面进行修改。页面包含以下格式的几个container元素：

<div class="container">
    <div class="A"></div>
    <div class="B">
        <div class="C"></div>
    </div>
    <div class="D"></div>
</div>

对于每个container，我想移动内容，使A位于B内部，如下所示：

<div class="container">
    <div class="B">
        <div class="C"></div>
        <div class="A"></div>
    </div>
    <div class="D"></div>
</div>

使用jQuery执行此操作的最佳方法是什么？我能想到的每一个解决方案都只适用于单个container元素，而不是全部修改它们。

Answer 1

$('.container').each(function(){
    $(this).find('.A').appendTo($(this).find('.B'));
});

Answer 2

试试这个：

$('.container .A').each(function() {
  $(this).siblings('.B').append($(this));
});

Answer 3

如果您想MOVE该元素，而不是像您在问题中所说的那样COPY。

$('.container').each(function(){
    $(this).find('.A').detach().appendTo($(this).find('.B'));
});

FIDDLE