我如何使用 Jquery 将 HTML 元素移动到容器外？

Question

我需要将每个容器中的 p 标签移到它的容器之外，所以我需要将“一些文本 1”移到它的容器之外，下一段也是如此，但我得到的是他们正在从容器中移出

$(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

您需要适当限制元素选择的范围。

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

.select-p-container 在整个文档中选择所有个具有 class 的元素。

您只需要元素，即当前段落的实际父元素：

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

我如何使用 Jquery 将 HTML 元素移动到容器外？

How can i move HTML elements outside their containers using Jquery?

javascript

html

jquery

css