jQuery移动端元素排序问题：克隆子元素重复出现

我来帮你解决这个克隆元素重复的问题！你的代码出现重复元素的核心原因有两个：

1. 选择器范围未限定：调用insertBefore(".sar--first")时，它会匹配页面上所有.sar--first元素，而不是当前遍历的.sar--img-right-first容器内部的元素，导致每次循环都把克隆的元素插入到所有符合条件的位置。
2. 多余的克隆操作：你其实不需要先remove()再clone()——DOM元素的移动操作本身会自动把元素从原位置移除，克隆反而会生成新的重复元素。

修正后的代码 #

jQuery(document).ready(function() {
  // 定义调整元素顺序的函数，方便复用
  function adjustElementOrder() {
    if(jQuery(window).width() <= 1000) {
      jQuery(".sar--img-right-first").each(function() {
        var thiz = jQuery(this);
        // 直接在当前容器内移动元素，无需克隆
        thiz.find(".sar--second").insertBefore(thiz.find(".sar--first"));
      });
    } else {
      // 可选：窗口宽度大于1000时恢复原顺序
      jQuery(".sar--img-right-first").each(function() {
        var thiz = jQuery(this);
        thiz.find(".sar--first").insertBefore(thiz.find(".sar--second"));
      });
    }
  }

  // 页面加载时执行一次
  adjustElementOrder();

  // 监听窗口 resize 事件，实时调整（可选，提升用户体验）
  jQuery(window).on("resize", function() {
    adjustElementOrder();
  });
});

代码解释 #

• 限定选择器范围：通过thiz.find(".sar--first")，确保我们只操作当前.sar--img-right-first容器内的元素，不会影响其他容器。
• 移除多余克隆：直接使用insertBefore()移动原元素，避免生成重复的克隆节点。
• 添加resize监听：可选补充，确保窗口大小变化时元素顺序能实时调整，同时在宽度超过1000px时恢复原结构，提升响应式体验。

效果验证 #

运行修正后的代码后，当窗口宽度≤1000px时，每个.sar--img-right-first容器内的结构会变成：

<div class="sar--img-right-first">
  <div class="sar--second">img</div>
  <div class="sar--first">text</div>
</div>

完全符合你的期望，不会出现重复的.sar--second元素。

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