JavaScript初学者求助：如何用for循环从数组向h2标签添加文本

你的代码现在的问题是：每次循环都会选中所有.ic-table-h2容器，给它们各自添加一个h2标签，最后每个容器里都会有4个重复的标题。要实现一个容器对应一个数组元素的效果，可以这样修改：

方法一：用eq()定位对应索引的容器 #

$(document).ready(function () {
  const titles = ["Title 1", "Title 2", "Title 3", "Title 4"]; // 修正了原数组重复的Title3
  for (let i = 0; i < titles.length; i++) {
    // 用模板字符串拼接更简洁
    const addText = `<h2>${titles[i]}</h2>`;
    // 只给第i个.ic-table-h2容器添加内容
    $(".ic-table-h2").eq(i).append(addText);
  }
});

方法二：先获取容器集合再循环操作 #

$(document).ready(function () {
  const titles = ["Title 1", "Title 2", "Title 3", "Title 4"];
  // 提前获取所有容器元素的集合，避免每次循环重复查找DOM
  const containers = $(".ic-table-h2");
  
  for (let i = 0; i < titles.length; i++) {
    const addText = `<h2>${titles[i]}</h2>`;
    // 操作集合中对应索引的容器
    $(containers[i]).append(addText);
  }
});

额外提示 #

如果数组长度和容器数量不一致，建议加个判断避免索引越界：

for (let i = 0; i < titles.length; i++) {
  if (i >= containers.length) break; // 容器不够就停止循环
  const addText = `<h2>${titles[i]}</h2>`;
  $(containers[i]).append(addText);
}

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