Как переместить каждый div в другой

Question

У меня есть div.my-div в контейнерах. Как я могу переместить этот div из контейнера в раздел в каждом разделе?

<section> 
    <div class="container">container 
     <div class="my-div">my div</div> 
    </div> 
</section> 

<section> 
    <div class="container">container 
     <div class="my-div">my div</div> 
    </div> 
</section> 

<section> 
    <div class="container">container 
     <div class="my-div">my div</div> 
    </div> 
</section> 

Answer 1

Рабочая Демонстрационный

$('div.my-div').each(function(){ 
 
    $(this).closest('section').append($(this)) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<section> 
 
    <div class="container">container 
 
     <div class="my-div">my div</div> 
 
    </div> 
 
</section> 
 

 
<section> 
 
    <div class="container">container 
 
     <div class="my-div">my div</div> 
 
    </div> 
 
</section> 
 

 
<section> 
 
    <div class="container">container 
 
     <div class="my-div">my div</div> 
 
    </div> 
 
</section>

Answer 2

Вы можете сделать это, как показано ниже.

$('.my-div').each(function() { 
 
    $(this).closest('section').append(this.outerHTML); 
 
    $(this).remove(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<section> 
 
    <div class="container">container 
 
     <div class="my-div">my div</div> 
 
    </div> 
 
</section> 
 

 
<section> 
 
    <div class="container">container 
 
     <div class="my-div">my div</div> 
 
    </div> 
 
</section> 
 

 
<section> 
 
    <div class="container">container 
 
     <div class="my-div">my div</div> 
 
    </div> 
 
</section>

Answer 3

Попробуйте это: Вы можете найти родительский раздел каждого my-div и использовать .append() для перемещения дел до родительского раздела.

$(function(){ 
 
    $('section div.container div.my-div').each(function(){ 
 
    $(this).closest('section').append($(this)); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<section> 
 
    <div class="container">container 
 
     <div class="my-div">my div</div> 
 
    </div> 
 
</section> 
 

 
<section> 
 
    <div class="container">container 
 
     <div class="my-div">my div</div> 
 
    </div> 
 
</section> 
 

 
<section> 
 
    <div class="container">container 
 
     <div class="my-div">my div</div> 
 
    </div> 
 
</section>