jQuery .each() 循环变得疯狂

Question

我有大约 25 组 div 容器，其子容器共享相同的父/子类名称，每个组都有一个空的 div 容器。

<div class="parent">
    <div class="child">
        child content1
    </div>
</div>
<div class="empty"></div>

<div class="parent">
    <div class="child">
        child content2
    </div>
</div>   
<div class="empty"></div>

.....

<div class="parent">
    <div class="child">
        child content25
    </div>
</div>  
<div class="empty"></div>

我想将每个“子”div 元素附加到“空”div 容器中，使其看起来像：

<div class="parent">
    <div class="child">
        child content1
    </div>
</div>
<div class="empty">
    <div class="child">
        child content1
    </div>
</div>

<div class="parent">
    <div class="child">
        child content2
    </div>
</div>
<div class="empty">
    <div class="child">
        child content2
    </div>
</div>

....

<div class="parent">
    <div class="child">
        child content25
    </div>
</div>
<div class="empty">
    <div class="child">
        child content25
    </div>
</div>

我使用了以下代码：

$('.parent').each(function(){    
    $(this).find('div').appendTo('.empty');
}); 

但结果显示“子”div 元素及其内容在每个组中循环到“空”div 25 次，即 25x25=625 个新的“子”div！快疯了！！！！！！！！！！！！

有人可以帮忙吗？！

Answer 1

使用 .next() 可能会更好吗？

$('.parent').each(function(){   
       var parent = $(this);
       var child = parent.children('.child');
       parent.next('.empty').append(child.clone());
}); 

在稍微弄乱了实现之后，这是一个小提琴 -> http://jsfiddle.net/g9G85/8/

Answer 2

This 看起来像你想要的：

<div class="parent">
    <div class="child">
        child content1
    </div>
</div>
<div class="empty"></div>

<div class="parent">
    <div class="child">
        child content2
    </div>
</div>   
<div class="empty"></div>​

JS：

$('.parent').each(function() {
    var parent= $(this);
    var child = parent.children('.child');
    parent.next('.empty').append(child.clone());
});​