CODEWITHSUNDEEP
javascriptfor-loopincrement
Brandon Turner
Brandon Turner

Reputation: 15

In a for loop, how do I increment a counter once every other time?

I apologize for the clunky wording of the question. English is not my first language.

I am creating a scrollable list. Each element of this list consists of a column with two rows. I don't want to offset the column until each row is filled. I basically only want to increment the offset counter every two cycles of the for loop. My code for this is as follows:

var j = 0;
for(var i=0;i<localArray.length;i++){
    var iconLeft = 145 * j;

    var div = document.createElement('div');
    div.id              = "page_icon_" + i;
    div.style.position  = "absolute";
    div.style.height    = "45px";
    div.style.width     = "145px";
    div.style.left      = iconLeft + "px";

    var item = fishListItem(localArray[i].info);
    div.appendChild(item);
    var parent = document.getElementById('tut_icons_scroll');

    if(i%2){
        item.style.top = "40px";
        parent.appendChild(div);
    }else{          
        parent.appendChild(div);
    }
    if (i%2) {
        j++;
    }

Is there a way to do with without introducing the variable 'j'?

Upvotes: 1

Views: 3264

Answers (6)

jongo45
jongo45

Reputation: 3090

You can use Math.floor as stated in a couple of answers. Or bit-shift right by one:

i>>1;

Either substitute j with this expression, or use: var j=i>>1;. i>>1 will have the following values for each loop with an incrementing i:

0,0,1,1,2,2,3,3,4,4,...

Upvotes: 0

Dinesh
Dinesh

Reputation: 4563

Try this:

for(var i=0, j=0; i < 10; i++%2 && ++j) {
  console.log(i,j);
}

Upvotes: -1

nathanwww
nathanwww

Reputation: 109

Would it be easy to use a pass element i and then (i+1) to a function and then count up by 2s?

Something like: 

function appendFunction(elementToAdd, addItTo) {}

for (var i = 0; i < localArray.length; i+=2) { 
  var iconLeft = 145*(i%2); // at 0 
  var iconRight = 145*(i%2 + 1); // at 145
  appendFunction(elementToAdd[i], addItTo}
  appendFunction(elementToAdd[i+1], addItTo}
}

Not sure if the function helps a lot, but anyways, adding by twos and treating the cases of (x) and (x+1) within the for loop should allow you to increment a counter once every other time. You have to say what to happen twice each time, but one you make a function for it, it's about as long and leaves you with an easily reusable bit to append the elements in the way to place the text.

Upvotes: 0

Sean
Sean

Reputation: 3042

I would like to use pure css nth-child to accomplish this requirement

if(i%2){
    item.style.top = "40px";
    parent.appendChild(div);
}

to replace this, in your css div:nth-child(even) { top: 40px; }

to replace j, just create a class for the column, set the margin for it, and position set to relative, float set to left.

can you provide your code in jsbin or jsfiddler so I can help you out. I thought this solution is much clear and easy to maintain.

Upvotes: 0

DenverCoder9
DenverCoder9

Reputation: 495

You could just do:

Math.floor(i/2)

in place of j.

Upvotes: 2

arghbleargh
arghbleargh

Reputation: 3160

In this case, you can replace all instances of j with Math.floor(i/2).

Upvotes: 2

Related Questions