克隆第一个div并使用类名追加到下一个div之后

Question

I am having structure like:-

 <div class="container"> <h1 class="header-div">Title 1</h1> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> <div class="image-div">image1</div> </div> <div class="container"> <h1 class="header-div">Title 2</h1> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> <div class="image-div">image2</div> </div> <div class="container"> <h1 class="header-div">Title 3</h1> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> <div class="image-div">image3</div> </div> 

---

I want to take h1 and append it after .image-div and want to do it for every block

Answer 1

Two things

• appendTo will append inside div not after div .
• without iteration it will clone all of them together and append all these clones for every image-div

You need to try

$(".header-div").each( function(){
  $(this).clone().insertAfter( $(this).parent().find( ".image-div" ) );
});

or

$(".header-div").each( function(){
  $(this).clone().appendTo( $(this).parent() );
});

Answer 2

Fiddle

It could be done like so

var container = $(".container");
$.each(container, function(k, e){
    $(e).find('.header-div').clone().appendTo($(e).find(".image-div"))
} )

each loops through array of main div elements where image and title divs are, and just move title to another DOM position.