如何使用jQuery创建循环避免重复的DOM赋值代码？

完全能通过jQuery（或者原生JS循环）来消除这段重复代码，让逻辑更简洁易维护。这里给你几种常用的实现方式：

方法1：普通for循环（最直观） #

利用索引的规律直接拼接元素ID，遍历table数组完成赋值：

for (let i = 0; i < 6; i++) {
  $(`#number${i + 1}`).text(table[i][2]);
}

这里i对应table数组的索引（0到5），i+1刚好匹配number1到number6的ID后缀，完美对应原逻辑。

方法2：jQuery的$.each遍历（更贴合jQuery风格） #

如果更习惯jQuery的遍历方式，可以直接遍历table数组，用当前索引对应元素ID：

$.each(table, function(index, row) {
  $(`#number${index + 1}`).text(row[2]);
});

index是当前遍历到的数组索引，row就是table里的当前行数据，直接取row[2]赋值即可。

方法3：更灵活的适配写法（推荐） #

如果后续table的行数可能变化，或者不确定所有number元素都存在，可以加入长度判断，避免找不到元素的报错：

for (let i = 0; i < table.length; i++) {
  const targetElement = $(`#number${i + 1}`);
  // 先检查元素是否存在，再执行赋值
  if (targetElement.length) {
    targetElement.text(table[i][2]);
  }
}

这种写法会自动适配table的长度，即使table新增了行，只要对应number元素存在，就会自动赋值，扩展性更强。

这样改造后，代码冗余度大大降低，后续维护也更省心~

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