如何使用JavaScript循环为每两个div批量添加odd、even类

原有代码问题 #

• 选择器与实际HTML结构不匹配，无法选中目标元素
• each回调内部每次都将index重置为0，索引判断逻辑完全失效
• 模3的判断逻辑和你「每2个元素为一组」的需求不符

正确实现代码 #

// 遍历每个custompsps容器，保证各容器内分组独立
$('.custompsps').each(function() {
  $(this).find('.ProductItem').each(function(index) {
    // 计算当前元素所属分组，每2个为一组
    const group = Math.floor(index / 2);
    // 按分组奇偶添加对应类名
    $(this).addClass(group % 2 === 0 ? 'even' : 'odd');
  })
})

逻辑说明 #

1. 优先遍历外层的.custompsps容器，避免不同容器内的元素索引互相干扰，保证每个容器内的分组规则独立生效
2. 对单个容器内的ProductItem按索引计算分组，索引0、1属于第0组，索引2、3属于第1组，以此类推，刚好满足每2个为一组的需求
3. 分组序号为偶数时添加even类，为奇数时添加odd类，和你需要的最终结构完全匹配

如果你的实际页面结构和你最初写的.CollectionInner__Products .Grid__Cell层级一致，只需要把代码里的.custompsps替换为对应的父容器选择器即可。

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