1

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

Improve this question
4
  • 1
    How is this 5/4/4 pattern achieved in the first place? Commented May 14, 2012 at 14:54
  • 3
    your code looks really terrible. Don't use inline styles. Don't use font-tags. Dont use those <br> Commented May 14, 2012 at 14:56
  • @Amberlamps :) because of my table width Commented May 14, 2012 at 14:56
  • well, then adjust your table width so it displays 4/3/3 instead of 5/4/4. Commented May 14, 2012 at 14:57

4 Answers 4

Reset to default
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 }
Improve this answer
Sign up to request clarification or add additional context in comments.

8 Comments

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
I don't no why but i think because of my table width, it displays the same data again after using you logic
@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.
@ajax333221 And yes, i != 12 will be probably nicer for what op wants. I wanted to solve the task generally, though :)
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)
|
1

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);
Improve this answer

Comments

0

put this at the end of loop:

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

Comments

0

What about this?

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

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.