通過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'); 
    }); 
});