通过jQuery将一个div移动到另一个div

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格为.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'); 
    }); 
});