jQuery .each循环输出累积旧值问题求助

问题根源 #

你猜测的完全正确，问题就出在.each循环里的+=操作上。snappyLabel和snappyID是在循环外部声明的变量，每次循环执行snappyLabel += $(this).attr("aria-label")时，会把当前元素的aria-label值追加到之前的值后面，而非替换成当前元素的属性值，最终导致每个列表项的文本和链接都累积了之前所有元素的内容。

修正后的代码 #

方案1：将变量声明移至循环内部 #

jQuery(document).ready(function ($) {
  var snappyList = "";
  $(".snappy").each(function () {
    // 每次循环重新获取当前元素的属性，不再累加
    var snappyLabel = $(this).attr("aria-label");
    var snappyID = $(this).attr("id");

    snappyList +=
      '<li class="sidenavitem"><a class="navitem" href="#' +
      snappyID +
      '"><div class="sidenavicon"></div><div class="sidenavtitle">' +
      snappyLabel +
      '</div></a></li>';
  });
  console.log(snappyList);

  $("body").append(
    '<div class="sidenavcontainer"><ul class="sidenavwrap">' +
      snappyList +
      '</ul></div>'
  );
});

方案2：直接在字符串拼接时获取属性（更简洁） #

省去中间变量，直接在拼接HTML时调用$(this).attr()，彻底避免变量累加问题：

jQuery(document).ready(function ($) {
  var snappyList = "";
  $(".snappy").each(function () {
    snappyList +=
      `<li class="sidenavitem">
        <a class="navitem" href="#${$(this).attr('id')}">
          <div class="sidenavicon"></div>
          <div class="sidenavtitle">${$(this).attr('aria-label')}</div>
        </a>
      </li>`;
  });
  console.log(snappyList);

  $("body").append(
    `<div class="sidenavcontainer">
      <ul class="sidenavwrap">${snappyList}</ul>
    </div>`
  );
});

关键修正说明 #

1. 移除累加操作：不再使用+=给snappyLabel和snappyID赋值，每次循环直接获取当前元素的属性值，确保每个列表项只对应单个.snappy元素的id和aria-label。
2. 使用模板字符串（可选）：ES6模板字符串（`包裹）让HTML拼接更易读，避免大量字符串拼接符号和转义问题。
3. 修复转义错误：原代码中的<、"是HTML转义字符，在JS字符串中可直接使用<、"，无需额外转义。

验证结果 #

修正后，生成的每个列表项都会正确对应单个.snappy元素的属性，不会再出现内容叠加的情况，与你期望的输出完全一致。

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