如何使用jQuery将容器内的HTML元素正确移动到对应父容器外部

问题原因 #

原有代码中insertBefore的参数传入了全局选择器.select-p-container，会匹配页面内所有该类名的容器。遍历每个p标签执行插入时，会将当前p插入到所有匹配容器的前方，最终两个p标签都会被移动到全部容器的最外侧，无法和自身所属的父容器一一对应。

修复代码 #

只需要在遍历时，先获取当前p标签所属的父级.select-p-container，再将p插入到这个特定父容器的前方即可，CSS和HTML代码无需修改：

$(document).ready(function() {
    $('.select-p-container p').each(function () {
      // 定位当前p标签直属的.select-p-container父容器
      const currentParent = $(this).parent('.select-p-container');
      $(this).insertBefore(currentParent);
    })
});

配套原有CSS、HTML参考：

.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>

实现效果 #

修复后，内容为Some text 1的p标签会被移动到第一个.select-p-container的外部前方，内容为Some text 2的p标签会被移动到第二个.select-p-container的外部前方，符合预期。

内容的提问来源于stack exchange，提问作者Mohamad