JavaScript For Loop work hows?

Question

I am using JavaScript for loop, my code is here

content = "";           
for (var i = 0; i < 13; i++) {
  var alt=glevel[i].getAttribute("name");
  if(jQuery.inArray(alt, clickArray) > -1) {
    if ($.browser.msie  && parseInt($.browser.version, 10) === 8 || $.browser.msie  && parseInt($.browser.version, 10) === 7) {
      content += "<li id='"+alt+"' style='cursor:pointer;filter:alpha(opacity=50);'>"+alt+"<br><div style='width:auto;'><img src='products/"+alt+".png'><br><font size='1px'>Click Base To Select</font></div><br><p style='text-decoration:none;color:#ffffff;font-size:10px;margin-top:-18px;' id='"+alt+"'>Click Here For Product Info</p></li> \n";
    } else {
      content += "<li id='"+alt+"' style='cursor:pointer;opacity:0.3;'>"+alt+"<br><div style='width:auto;'><img src='products/"+alt+".png'><br><font size='1px'>Click Base To Select</font></div><br><p style='text-decoration:none;color:#ffffff;font-size:10px;margin-top:-18px;' id='"+alt+"'>Click Here For Product Info</p></li> \n";
    }
    //$('#'+clickArray[alt]+"").css("opacity","0.5");
  } else{
    content += "<li id='"+alt+"' style='cursor:pointer'>"+alt+"<br><div style='width:auto;'><img src='products/"+alt+".png'><br><font size='1px'></font></div><br><p style='text-decoration:none;color:#ffffff;font-size:10px;margin-top:-18px;' id='"+alt+"'></p></li> \n";
  }
  $("#step_2").html(content);
}

output of this code is something like that :-

image1 image2 image3 image4 
image5 image6 
image7 image8 image9 image10 
image11 image12 image13

update:- it looks like that because of my table width and height

It works very fine, it display the real product images what i have.

now i want to display something like this :-

image1 image2 image3 image4     
image5 image6 image7     
image8 image9 image10     
image11 image12 image13

means in the first row 4 images, while 2nd,3rd, and 4th row have 3 images

your code looks really terrible. Don't use inline styles. Don't use font-tags. Dont use those <br> — Christoph
– Christoph, Commented May 14, 2012 at 14:56
well, then adjust your table width so it displays 4/3/3 instead of 5/4/4. — Christoph
– Christoph, Commented May 14, 2012 at 14:57

Imp · Accepted Answer · 2012-05-14 14:57:35Z

2

for (var i = 0; i < 13; i++) {
    content += "...";

    if (i == 3)                       // after the fourth line,
       content += '<br/><br/>';       // add an empty line
    if (i > 3 && (i - 4) % 3 == 2)    // then, after every three lines
       content += '<br/><br/>';       // add an empty line
}

answered May 14, 2012 at 14:57

Imp

8,6091 gold badge28 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

ajax333221 Over a year ago

I really like your logic, amazing! the only thing I would change is to add a continue; to remove the i > 3 check and add a check to don't add breaks on the i == 12 jsfiddle.net/cQzgD

Relax Over a year ago

I don't no why but i think because of my table width, it displays the same data again after using you logic

Imp Over a year ago

@ajax333221 Well, you're right that i > 3 is actually not necessary. It is only there to prevent the newline from being added at i == 2, but that won't happen because (2 - 4) % 3 == -2, not 2 :) The continue, however, only spares one if comparison, so that's not that much of an efficiency improvement.

Imp Over a year ago

@ajax333221 And yes, i != 12 will be probably nicer for what op wants. I wanted to solve the task generally, though :)

ajax333221 Over a year ago

well not much performance now, but if he keep adding stuff below that line it will get worse. Also, about the efficiency of % vs two loops: jsperf.com/loopcomparation (I know is not 100% your code, but it should be the same results)

|

ajax333221 · Accepted Answer · 2012-05-14 16:18:05Z

This is could do the trick:

var content = "", imgNum = 1, max = 4;

for (var i = 0; i < 4; i++) {
    if (i != 0) {
        max = 3;
    }
    for (var j = 0; j < max; j++) {
        content += "image" + imgNum;
        imgNum++;
    }
    content += "<br />";
}

document.write(content);

demo

This is the logic:

set starting image number to 1
set max to 4 (later we will change it to 3)
loop the num of rows (4 times)
- if we are at the first loop, leave max 4, otherwise change it to 3
- loop the num of cols (max times)
  - add stuff to content
  - increase image number by 1
- add the break after the loop

I prefered to use two loops instead of using the % operator, because it is more readable and faster.

edit: If you don't care about performance, I found a way to make a readable version with the %:

var content="";

for (var i = 0; i < 13; i++){
    content += "image"+(i+1);
    if(i==0||i==12){
        continue;
    }
    if(i%3==0) {
        content += "<br />";
    }
}

document.write(content);

topp · Accepted Answer · 2012-05-14 14:57:37Z

0

put this at the end of loop:

if (i == 3) { content += '<br/>'; }
if (i > 3 && (i - 4) % 3 == 2) { content += '<br/>'; }

answered May 14, 2012 at 14:57

topp

1501 silver badge8 bronze badges

Comments

Starx · Accepted Answer · 2012-05-14 14:59:44Z

0

What about this?

for (var i = 0; i < 13; i++){
    content += "<li>...</li>";
    if(i==3 || i==6 || i==9) { content += "<br />"; }
}

answered May 14, 2012 at 14:59

Starx

79.3k50 gold badges187 silver badges266 bronze badges

Collectives™ on Stack Overflow

JavaScript For Loop work hows?

4 Answers 4

8 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

8 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related