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