CODEWITHSUNDEEP
jquery
Mufeed Ahmad
Mufeed Ahmad

Reputation: 485

Move one div to another div via jQuery

There is an application generating container dynamically and I am trying to move that into another container. Its pretty simple but the function behaving weird.

HTML Code:

<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 code:

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

As per the above simple code I am trying to move .social div into .fbto. But no luck.

Any help much appreciated.

Upvotes: 1

Views: 72

Answers (2)

Vijay Arun
Vijay Arun

Reputation: 414

you need to invoke the each function after document loaded.

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

Upvotes: 0

John R
John R

Reputation: 2791

Try this.

  1. Remove the return false. Because it will stop the loop execution.
  2. Get the corresponding .fbto element and append to it.

$(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>

Upvotes: 1

Related Questions