如何为菜单第4个同类别元素加类并实现分段滚动效果？

需求1：为每第4个同类元素添加额外类 #

直接通过JS选中目标元素后，遍历判断位置即可实现：

// 替换成你的目标类名
const elements = document.querySelectorAll('.your-target-class');

elements.forEach((el, index) => {
  // 匹配第4、8、12...个元素（索引从0开始，用index+1判断位置）
  if ((index + 1) % 4 === 0) {
    el.classList.add('new-class');
  }
});

需求2：按行分组区块实现分段滚动 #

没必要事后再选元素分组，直接在拼接menu字符串时就按每行3个的规则包裹分组容器（比如<section>或带类的div），更高效：

let menu = '';
const items = document.getElementsByTagName('item'); // 假设已解析XML拿到所有item节点
let count = 0;

for (let i = 0; i < items.length; i++) {
  count++;
  // 每3个元素开头添加分组容器
  if (count % 3 === 1) {
    menu += '<section class="menu-section">'; // 也可以用<div class="menu-row">
  }

  // 拼接单个区块代码，插入item内容
  menu += '<div class="col col-12 col-lg-4"><div class="lorem">';
  menu += items[i].textContent; // 读取item的CDATA内容
  menu += '</div></div>';

  // 每3个元素结尾闭合分组容器
  if (count % 3 === 0) {
    menu += '</section>';
  }
}

// 处理总数不是3的倍数的情况，补充闭合容器
if (count % 3 !== 0) {
  menu += '</section>';
}

// 将生成的菜单插入页面目标容器
document.getElementById('menu-container').innerHTML = menu;

生成的结构会自动把每行3个区块包裹在<section class="menu-section">里，之后你可以给这些section设置大间距，轻松实现分段滚动效果。

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