动态地将内容从一个div追加/添加到另一个div-使用JS / jQuery

Question

I have a 3 column div with multiple rows. What is the most dynamic way to extract content from the first div and append/prepend this to the 3rd div - Ensuring that all following divs follow along.

here is my example code:

  <div class="content"> <div class="item"> <div class="col1"> <div class="img1"> <img src="img_in_first_col"> </div> </div> <div class="col2"></div> <div class="col3"> <div class="img2"> <img src="img_in_third_col"> </div> </div> </div> <div class="item"> <div class="col1"> <div class="img1"> <img src="img_in_first_col"> </div> </div> <div class="col2"></div> <div class="col3"> <div class="img2"> <img src="img_in_third_col"> </div> </div> </div> <div class="item"> <div class="col1"> <div class="img1"> <img src="img_in_first_col"> </div> </div> <div class="col2"></div> <div class="col3"> <div class="img2"> <img src="img_in_third_col"> </div> </div> </div> </div> 

I've tried using something along the lines of:

 $('.item .col1 .img1').each(function(){ $(this).prependTo('.item .col3 .img2') }) 

but what i get is all the images being added to all the rows. Please help! thanks in advance

Answer 1

Should be as simple as this:

$(".col1").each(function (index, element) {
  $(this).closest(".col3").prepend($(this).contents());
});

Answer 2

You could use this to insert column 1 after column 3:

$('.col1').each(function(){
  $(this).insertAfter($(this).siblings('.col3'));
});

... or before column 3:

$('.col1').each(function(){
  $(this).insertBefore($(this).siblings('.col3'));
});

Used jQuery functions:

• insertAfter
• insertBefore
• siblings