如何为数组中的指定DOM元素添加CSS类.mlft

原代码存在的问题 #

• 错误的元素选取方式：divSubMenu [0, 166, 187, 205, 208] 无法正确获取对应索引的元素，querySelectorAll返回的是NodeList，不能直接用这种语法提取多个索引元素。
• 循环变量错误：for循环初始化j=0，但循环条件里用i++，变量不匹配会导致循环异常。
• 操作对象错误：尝试给divSubmenuarray添加类，但该变量并非DOM元素，无法调用classList.add方法。
• 冗余函数定义：循环内重复定义addMargin函数完全没必要，直接执行添加类的操作即可。

正确实现代码 #

// 获取所有目标元素集合
const divSubMenu = document.querySelectorAll('.accordion-collapse');
// 定义需要添加类的元素索引
const targetIndexes = [0, 166, 187, 205, 208];

// 遍历目标索引数组
targetIndexes.forEach(index => {
  // 检查索引对应的元素是否存在，避免越界错误
  if (divSubMenu[index]) {
    divSubMenu[index].classList.add('mlft');
  }
});

代码说明 #

• 先定义目标索引数组，清晰明确要操作的元素位置。
• 使用forEach遍历索引数组，比for循环更简洁易读。
• 添加存在性检查if (divSubMenu[index])，防止因索引超出集合长度导致的报错。

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