如何在JavaScript的for循环中筛选奇数或偶数索引i？

嘿，这个需求很常见，咱们直接看具体实现方式：

首先先优化下你的原代码——把document.getElementsByClassName('box')的结果提前存到变量里，避免每次循环都重新查询DOM，能提升不少性能：

const boxes = document.getElementsByClassName('box');
for (var i = 0; i < boxes.length; i++) {
  // 后续判断逻辑写在这里
}

筛选偶数索引的元素（i为0、2、4...） #

利用取模运算符%，当i % 2 === 0时，说明当前索引是偶数：

const boxes = document.getElementsByClassName('box');
for (var i = 0; i < boxes.length; i++) {
  if (i % 2 === 0) {
    // 这里写你要对偶数索引元素执行的代码
    boxes[i].style.backgroundColor = 'lightblue';
  }
}

筛选奇数索引的元素（i为1、3、5...） #

同样用取模运算，判断i % 2 === 1即可：

const boxes = document.getElementsByClassName('box');
for (var i = 0; i < boxes.length; i++) {
  if (i % 2 === 1) {
    // 这里写你要对奇数索引元素执行的代码
    boxes[i].style.border = '2px solid orange';
  }
}

小技巧：用continue跳过不需要的元素 #

如果你想直接跳过不符合条件的索引，让代码更简洁，可以用continue语句：

const boxes = document.getElementsByClassName('box');
for (var i = 0; i < boxes.length; i++) {
  // 跳过偶数索引，只处理奇数
  if (i % 2 === 0) continue;
  
  // 直接写处理逻辑即可
  boxes[i].style.color = 'darkred';
}

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