如何用JS批量为HTML元素动态设置子元素数量的data属性

一、批量初始化方案 #

通过遍历对应元素的索引，将每个.parent_container的子元素数量绑定到对应的.amount_title的data-children属性上，避免手动逐个赋值：

const amountTitles = document.querySelectorAll('.amount_title');
const parentContainers = document.querySelectorAll('.parent_container');

// 批量初始化每个标题的data-children值
amountTitles.forEach((title, index) => {
  title.dataset.children = parentContainers[index].childElementCount;
});

如果你习惯用for循环，注意使用let声明循环变量（避免变量作用域问题导致所有标题取最后一个容器的数量）：

for (let i = 0; i < amountTitles.length; i++) {
  amountTitles[i].dataset.children = parentContainers[i].childElementCount;
}

二、动态更新实现（增删子元素时自动同步） #

要实现子元素增删时自动更新data-children，可以使用MutationObserver监听每个.parent_container的子节点变化：

const amountTitles = document.querySelectorAll('.amount_title');
const parentContainers = document.querySelectorAll('.parent_container');

// 封装更新单个标题的函数
function updateChildCount(title, container) {
  title.dataset.children = container.childElementCount;
}

// 初始化+添加监听
amountTitles.forEach((title, index) => {
  const container = parentContainers[index];
  // 初始化数值
  updateChildCount(title, container);
  
  // 创建观察者，监听容器的子节点添加/移除
  const observer = new MutationObserver(() => {
    updateChildCount(title, container);
  });
  
  // 配置观察选项：仅监听子节点的数量变化
  observer.observe(container, {
    childList: true
  });
});

为什么之前循环会出问题？ #

如果你的循环代码出现所有data-children都取最后一个容器数量的情况，大概率是使用了var声明循环变量（var的作用域是函数级，循环结束后所有回调都会引用同一个变量值）。改用let（块级作用域）或forEach遍历即可解决这个问题。

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