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>

我想将每个“child”div元素追加到“empty”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');
});

但结果显示了“child”div元素＆amp;它的内容被循环到每个组的“空”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());
});

在搞乱实施后，这是一个小提琴 - ＆gt; 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());
});

jQuery .each（）循环变得狂野

2 个答案: