Переместить один div в другой div через jQuery

Question

Существует приложение, создающее контейнер динамически, и я пытаюсь переместить его в другой контейнер. Его довольно просто, но функция ведет себя странно.

HTML код:

<div class="column-4"> 
    <div class="social"> 
     social-1 
    </div> 
    <div class="fbto"></div> 
</div> 
<div class="column-4"> 
    <div class="social"> 
     social-2 
    </div> 
    <div class="fbto"></div> 
</div> 
<div class="column-4"> 
    <div class="social"> 
     social-3 
    </div> 
    <div class="fbto"></div> 
</div> 

JQuery код:

$('.column-4').each(function() { 
    $(this).find('.social').appendTo('.fbto'); 
    return false; 
}); 

В соответствии с выше простого кода я пытаюсь переместить .social Div в .fbto. Но не повезло.

Любая помощь очень ценится.

Answer 1

Попробуйте это.

1. Удалить return false. Потому что это остановит выполнение цикла.
2. Получить соответствующий элемент .fbto и добавить его.

$(function() { 
 
    $('.column-4').each(function() { 
 
    var fbto = $(this).find('.fbto'); 
 
    $(this).find('.social').appendTo(fbto); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
 
<div class="column-4"> 
 
    <div class="social"> 
 
    social-1 
 
    </div> 
 
    <div class="fbto"></div> 
 
</div> 
 
<div class="column-4"> 
 
    <div class="social"> 
 
    social-2 
 
    </div> 
 
    <div class="fbto"></div> 
 
</div> 
 
<div class="column-4"> 
 
    <div class="social"> 
 
    social-3 
 
    </div> 
 
    <div class="fbto"></div> 
 
</div>

Answer 2

вам необходимо вызвать каждую функцию после загрузки документа.

$(document).ready(function(){ 
    $('.column-4').each(function(){ 
     $(this).find('.social').appendTo('.fbto'); 
    }); 
});