how do I select only the odd or even variables that used in a for loop?

Question

here's my JS code:

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

I'm wondering how to select only the odd or even i's

Answer 1

Use Array operation map

    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
       }
    });

Or simple loop

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

Update

as @Motti said, .map, forEach (or any Array operation) won't work on HTMLCollection, what you may need to do is:

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

Answer 2

Even numbers have this odd property (even odd numbers do) that adding two to them keeps them even (or odd).

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

Note, if there's no good reason to evaluate getElementByClassName over and over again I would move it outside the loop.

Answer 3

Like @stvnBrkdll said

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

Answer 4

It's better that you use querySelectorAll() instead, details on NodeLists and Live HTMLCollections. And use let instead of var.

The easiest way to determine if a loop is currently on an even or odd iteration is by using the modulus of 2:

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

Demo

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>

Answer 5

Check this out

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
 }
}