如何解决窗口resize时重复添加空<li>的jQuery问题？

你的问题核心在于每次窗口resize触发时，都会重复执行wrap和appendTo操作，而且完全没判断按钮是否已经被移动到目标导航里——哪怕按钮已经套在<li>里并位于.main-nav ul内，代码还是会再次给它加一层<li>，然后把新生成的<li>追加进去，这就导致了多余的空<li>（或者说重复的包裹元素）。

另外，你的代码只处理了窗口缩小到768px以下的情况，完全没考虑窗口恢复到768px以上时的还原逻辑，这也会让后续resize操作出现更混乱的元素位置问题。

修复后的代码示例 #

$(document).ready(appendBtns);
$(window).resize(appendBtns);

function appendBtns() {
  const $btns = $('.btn');
  const windowWidth = $(window).innerWidth();

  if (windowWidth < 768) {
    // 只处理还没被移动到导航的按钮
    $btns.not('.moved-to-nav').each(function() {
      const $btn = $(this);
      // 保存原始父元素，方便后续还原位置
      $btn.data('originalParent', $btn.parent());
      // 包裹<li>并移动到目标导航列表
      $btn.wrap('<li>').parent().appendTo('.main-nav ul');
      // 标记该按钮已完成移动
      $btn.addClass('moved-to-nav');
    });
  } else {
    // 窗口恢复到768px以上，把按钮移回原始位置
    $btns.filter('.moved-to-nav').each(function() {
      const $btn = $(this);
      const $originalParent = $btn.data('originalParent');
      // 把按钮从<li>中取出，放回最初的父容器
      $btn.unwrap().appendTo($originalParent);
      // 移除标记和存储的原始父元素数据
      $btn.removeClass('moved-to-nav').removeData('originalParent');
    });
  }
}

关键修复细节 #

• 添加状态标记：用.moved-to-nav类标记已移动的按钮，彻底避免重复执行包裹和移动操作。
• 保存原始父元素：通过data()存储按钮最初的父容器，确保窗口放大时能精准还原位置。
• 双向逻辑处理：同时覆盖窗口缩小和放大的场景，不会让元素位置一直处于混乱状态。
• 精准遍历处理：用each()逐个处理按钮，保证每个按钮的状态独立，不会出现批量操作的冲突。

这样调整后，无论怎么拖动窗口调整大小，按钮只会被移动/还原一次，再也不会出现多余的空<li>标签了。

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