如何使用JavaScript按每两个一组遍历ProductItem div元素

实现将.ProductItem元素每两个分为一组遍历的需求，最适合使用步长为2的基础for循环，该循环可以灵活控制迭代步进长度，完美匹配固定间隔分组的场景。

代码示例 #

全局统一分组（所有容器内的ProductItem一起分组） #

// 获取所有ProductItem元素
const productItems = document.querySelectorAll('.ProductItem');
// 步长设为2，每次遍历处理一组
for (let i = 0; i < productItems.length; i += 2) {
  const currentGroup = [productItems[i], productItems[i + 1]];
  // 此处编写你的分组检查逻辑
  console.log('当前分组元素：', currentGroup);

  // 如果需要兼容元素总数为奇数的场景，可加判断处理第二个元素
  if (productItems[i + 1]) {
    // 存在第二个元素时的逻辑
  }
}

按父容器独立分组（每个.custompsps内的元素单独分组） #

如果需要按每个custompsps容器内部的元素单独分组，可使用如下写法：

const containers = document.querySelectorAll('.custompsps');
containers.forEach(container => {
  const items = container.querySelectorAll('.ProductItem');
  for (let i = 0; i < items.length; i += 2) {
    const currentGroup = [items[i], items[i + 1]];
    // 容器内分组检查逻辑
  }
});

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