动态生成的div子元素批量设置ID失败：仅首个元素获ID

算力阿峰

2026-7-28

问题分析与解决方案

你的代码仅能为第一个元素设置ID的核心原因：

document.querySelector('.card-')只会返回第一个匹配该选择器的DOM元素，后续循环只是反复给这同一个元素覆盖设置ID，最终只有第一个元素会被设置ID（且是循环最后一次赋予的ID值）。

修正代码

要给所有.card-元素设置唯一ID，需先获取全部匹配元素，再逐个遍历设置：

function addClass() {
  // 获取所有带.card-类的元素，返回NodeList集合
  const csrdLst = document.querySelectorAll('.card-');
  // 遍历集合中的每个元素
  for (let j = 0; j < csrdLst.length; j++) {
    // 为当前元素设置唯一ID
    csrdLst[j].setAttribute('id', `main-project${j}`);
  }
}
addClass();

简洁写法（可选）

也可以用forEach遍历NodeList，代码更简洁直观：

function addClass() {
  document.querySelectorAll('.card-').forEach((item, index) => {
    item.setAttribute('id', `main-project${index}`);
  });
}
addClass();