在多个div（jQuery）中重新排序html

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

如果你想移动那个元素，而不是你在问题中所说的 COPY 。

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

FIDDLE