如何使用 Jquery 将 HTML 元素移到其容器之外？

Question

I need to move the p tag in each container outside it's container, so i need to move "some text 1" outside its container and the same to the next paragraph , but what i'm getting is the both of them are moving out side the containers

 $(document).ready(function() { $('.select-p-container p').each(function () { $(this).insertBefore('.select-p-container'); }) });

 .select-p-container{ border:1px solid red; max-width:450px; margin-bottom: 20px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"> <div class="select-container"> <div class="select-p-container"> <p>Some text 1</p> <select name="" id=""> <option value="1">1</option> <option value="1">2</option> <option value="1">3</option> </select> </div> <div class="select-p-container"> <p>Some text 2</p> <select name="" id=""> <option value="1">1</option> <option value="1">2</option> <option value="1">3</option> </select> </div> </div> </div>

Answer 1

You need to properly limit the scope of your element selection.

$(this).insertBefore('.select-p-container')

.select-p-container selects all elements with that class, across the whole document.

You need only the element, that is the actual parent of the current paragraph:

$(this).insertBefore($(this).parent());