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 개의 새로운 "child"div가 표시됩니다. 그것은 거칠게 움직이고있다 !!!!!!!!!!!!

누군가 도와 줄 수 있습니까?!

Answer 1

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()); 
});​ 

Answer 2

아마도 .next()를 사용하면 더 잘 작동할까요? 여기

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

는 구현에 조금 장난 후 바이올린의 -> http://jsfiddle.net/g9G85/8/