如何将多个相同class的元素内容依次替换为数组中的对应项

实现代码（原生JavaScript，无依赖） #

// 获取所有class为test的DOM元素
const testEls = document.querySelectorAll('.test');
// 你从API拿到的整数数组
const dataArr = [1,5,2,11];

// 按索引对应替换元素内容
testEls.forEach((element, index) => {
  // 增加边界判断，避免数组长度小于元素数量时报错
  if (index < dataArr.length) {
    element.textContent = dataArr[index];
  }
});

可选：jQuery版本实现 #

如果你的项目已经引入了jQuery，可以用更简洁的写法：

const dataArr = [1,5,2,11];
$('.test').each(function (index) {
  if (index < dataArr.length) {
    $(this).text(dataArr[index]);
  }
})

边界说明 #

如果存在数组长度和对应class元素数量不一致的情况，上面的代码只会替换数组有对应值的元素，剩余元素内容保持不变。你可以根据业务需要调整逻辑，比如数组长度不够时设置默认值、数组更长时动态创建新元素等。

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