使用jQuery的insertBefore方法出现内容重复问题求助

我明白你遇到的问题了——用$('.num').insertBefore('.text')调整数字和文本的位置后，内容出现了重复，重复次数刚好和页面上.box元素的数量一致。这其实是jQuery选择器和DOM操作的特性导致的，我来给你拆解一下原因和解决办法：

问题原因 #

当你直接调用$('.num').insertBefore('.text')时，jQuery会执行两个步骤：

• 选中页面上所有匹配.num的元素；
• 将每一个选中的.num元素，都插入到每一个匹配.text的元素前面。

假设页面有2个.box，那就意味着2个.num会分别被插到2个.text的前面，最终每个.text前面都会出现2个.num，看起来就像是内容重复了。

解决方案 #

我们需要针对每个.box单独处理，让每个.num只被插入到它所在的同一个.box里的.text前面。这里有两种简洁的实现方式：

方法1：遍历每个.box，在盒子内部操作 #

$('.box').each(function() {
  // 在当前.box容器内，找到.num并插入到同容器的.text前面
  $(this).find('.num').insertBefore($(this).find('.text'));
});

方法2：遍历每个.num，插入到同盒子的兄弟.text前 #

$('.box .num').each(function() {
  // 把当前.num插入到它的兄弟元素.text前面
  $(this).insertBefore($(this).siblings('.text'));
});

这两种写法都能确保操作被限制在单个.box内部，不会跨容器移动元素，自然就解决了内容重复的问题。

你的原始HTML结构参考：

<div class="box-wrap"> 
  <div class="box"> 
    <p class="text">ABC</p> 
    <p class="num">123</p> 
  </div> 
  <div class="box"> 
    <p class="text">ABC</p> 
    <p class="num">123</p> 
  </div> 
</div>

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