如何仅选择 for 循环中使用的奇数或偶数变量？答案

【问题标题】：how do I select only the odd or even variables that used in a for loop?如何仅选择 for 循环中使用的奇数或偶数变量？
【发布时间】：2018-04-29 11:34:17
【问题描述】：

这是我的 JS 代码：

for (var i=0;i<document.getElementsByClassName('box').length ;i++) {
//code here
}

我想知道如何只选择奇数或偶数的我

【问题讨论】：

在循环中使用 javascript 的 mod 运算符 (%) 并除以 2：developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
另一种方法是计算i % 2 并检查0 或1

标签： javascript

【解决方案1】：

使用数组操作映射

    var boxes = document.getElementsByClassName('box');
    boxes.forEach(function(box, index) {
       if (index % 2 === 0) {
         //even elements are here, you can access it by box
       } else {
         //odd elements are here, you can access it by box
       }
    });

或者简单的循环

for (var i=0;i<document.getElementsByClassName('box').length ;i++) {
  if ( i % 2 === 0) { even }
  else { odd }
}

更新

正如@Motti 所说，.map、forEach（或任何数组操作）在 HTMLCollection 上不起作用，您可能需要做的是：

 Array.prototype.slice.call(boxes).forEach(function(box, index){
    if (index % 2 === 0) { //even box }
    else { //odd box }
 })

【讨论】：

是的，应该是forEach循环。
HTMLCollection 不是数组，它有length 但没有forEach 或map 函数。
不需要复制整个集合，而是这样做：Array.prototype.forEach.call(boxes,...

【解决方案2】：

偶数具有奇数特性（偶数奇数具有），将两个加到它们使它们保持偶数（或奇数）。

for (var i = 0; i < document.getElementsByClassName('box').length; i += 2) {} // even 
for (var i = 1; i < document.getElementsByClassName('box').length; i += 2) {} // odd

注意，如果没有充分的理由反复评估 getElementByClassName，我会将其移出循环。

【讨论】：

【解决方案3】：

就像@stvnBrkdll 所说的

for (var i=0;i<document.getElementsByClassName('box').length ;i++) {
    if (i % 2 === 0) {} // this are the even no.s
}

【讨论】：

【解决方案4】：

看看这个

function isOdd(num) { return num % 2;}

for (var i=0;i<ocument.getElementsByClassName('box').length;i++) {
 if(isOdd(i))
 {
  // Code goes here when i is odd
 }
 else
 {
  // Code goes here when i is even
 }
}

【讨论】：

【解决方案5】：

最好改用querySelectorAll()，详情见NodeLists and Live HTMLCollections。还有use let instead of var。

确定循环当前是偶数还是奇数迭代的最简单方法是使用 2 的模数：

if ( i % 2 === 0) {
 ... // do whatever for even counts
} else {
 ...// otherwise it's an odd iteration if it isn't even
}

演示

var NodeList = document.querySelectorAll('.box');

for (let i=0; i<NodeList.length; i++) {
  if (i % 2 === 0) {
    NodeList[i].textContent +="\nEVEN";
  } else {
    NodeList[i].textContent +="\nODD";
  }
}

.box {
 height:40px;
 width:40px;
 border:1px solid black
}

<div class='box'>BOX</div><b>The count starts at 0 so second box is odd. This can easily be adjusted at the for loop</b>
<div class='box'>BOX</div><div class='box'>BOX</div><div class='box'>BOX</div><div class='box'>BOX</div><div class='box'>BOX</div><div class='box'>BOX</div><div class='box'>BOX</div><div class='box'>BOX</div><div class='box'>BOX</div><div class='box'>BOX</div><div class='box'>BOX</div><div class='box'>BOX</div><div class='box'>BOX</div><div class='box'>BOX</div><div class='box'>BOX</div>

【讨论】：