如何自动为多个div添加递增类标签？

当然可以实现，你可以通过循环遍历数字范围替代重复代码块，把固定逻辑封装起来，根据动态生成的数字匹配对应的选择器和类名，彻底避免手动重复编写相似代码。

优化后的代码 #

$(document).ready(function() {
  $('.header-menu-nav-list').each(function() {
    const $list = $(this);
    // 遍历1到8的数字，可根据实际需求调整范围
    for (let n = 1; n <= 8; n++) {
      $list.find(`.header-menu-nav-folder-sub-nav-${n}`).each(function(el) {
        // 给当前sub-nav元素添加递增类
        $(this).addClass(`header-menu-nav-folder-sub-nav-${n}-${el + 1}`);
        // 找到对应的folder元素并添加标识类
        $list.find(`.header-menu-nav-folder-${n}`).addClass(`identifer-${n}-${el + 1}`);
      });
    }
  });
});

代码说明 #

• 用for循环自动遍历目标数字范围，动态生成选择器和类名，一次性替代8段重复代码
• 将当前.header-menu-nav-list元素缓存到$list变量，减少重复DOM查询，提升性能
• 使用模板字符串（`...`）替代传统字符串拼接，代码更易读、易维护
• 后续若需扩展数字范围（比如到10），只需修改循环终止条件（n <= 10）即可，无需新增重复代码

如果不确定页面中最大的数字是多少，还可以用动态识别类名中的数字的方式，让代码更灵活：

$(document).ready(function() {
  $('.header-menu-nav-list').each(function() {
    const $list = $(this);
    // 获取当前列表下所有sub-nav类的唯一数字标识
    const subNavNumbers = $list.find('[class*="header-menu-nav-folder-sub-nav-"]').map(function() {
      const match = this.className.match(/header-menu-nav-folder-sub-nav-(\d+)/);
      return match ? match[1] : null;
    }).get().filter((val, idx, arr) => arr.indexOf(val) === idx); // 去重
    
    // 遍历每个唯一数字标识处理
    subNavNumbers.forEach(n => {
      $list.find(`.header-menu-nav-folder-sub-nav-${n}`).each(function(el) {
        $(this).addClass(`header-menu-nav-folder-sub-nav-${n}-${el + 1}`);
        $list.find(`.header-menu-nav-folder-${n}`).addClass(`identifer-${n}-${el + 1}`);
      });
    });
  });
});

这个版本会自动识别页面中存在的所有header-menu-nav-folder-sub-nav-*类的数字，无需手动指定范围，适配元素数量不固定的场景。

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