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

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 2

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

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

Answer 5

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>