jQuery insertBefore方法异常：每个main容器出现两个sub-main2

问题原因 #

你的代码中，jQuery(".sub-main2")会选中页面上所有.sub-main2元素，jQuery(".sub-main1")会选中页面上所有.sub-main1元素。调用insertBefore时，每个.sub-main2都会被插入到每一个.sub-main1的前面——原本2个.sub-main2，每个都要插到2个.sub-main1前，最终每个.main容器里就会多出一个.sub-main2，变成两个。

解决方法 #

需要把操作限定在每个.main容器内部，确保每个容器里的.sub-main2只移动到当前容器的.sub-main1前面，有两种常用实现方式：

方法1：遍历每个父容器

jQuery(".main").each(function() {
  // 仅在当前.main容器内查找子元素
  const $sub2 = jQuery(this).find(".sub-main2");
  const $sub1 = jQuery(this).find(".sub-main1");
  $sub2.insertBefore($sub1);
});

方法2：针对每个.sub-main2找同级的.sub-main1

jQuery(".sub-main2").each(function() {
  // 找到当前.sub-main2的同级.sub-main1
  jQuery(this).insertBefore(jQuery(this).siblings(".sub-main1"));
});

核心逻辑 #

避免使用全局选择器直接操作所有匹配元素，而是通过父容器限定范围，或者针对单个元素找到其对应的目标元素，确保每个元素只被移动一次，不会跨容器重复插入。

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