如何使用jQuery在DOM上移动几个div

Question

I would like to move several divs up the DOM with jQuery.

<section>
    <div class="title"></div>
    <div class="temps"></div>
    <div class="list"></div>
</section>

I would like to move all the .list divs after the .title div. How can I do this with jQuery.

This $('.temps').insertAfter('.title'); does not work, it places all the .list after the first .title

Answer 1

I would like to move all the .list divs after the .title div.

You can use each method like this:

  $('.list').each(function(){ $(this).insertAfter( $(this) //.list div .closest('section') //find parent div section .find('.title') //find child div ); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <section> <div class="title">title</div> <div class="temps">temps</div> <div class="list">list</div> </section> <section> <div class="title">title</div> <div class="temps">temps</div> <div class="list">list</div> </section> <section> <div class="title">title</div> <div class="temps">temps</div> <div class="list">list</div> </section> 

Answer 2

simply try this, demo

$('.list').insertAfter($('.title'));

or

$('.list').insertAfter('.title'); //only selector no object

Answer 3

Try this

$('.list').each(function(){
   $(this).prevAll('.title').after($(this));
});

Answer 4

I wouldn't of been anble to get this working without @Bhojendra Nepal help in his answer above, and while his solution worked in his code snippit it did not work on my application. In the end the below worked for me.

jQuery('.list').each(function(){
   jQuery(this).insertAfter(jQuery(this).parent().find('.title'));
});