JavaScript的循环工作方式？ [英] JavaScript For Loop work hows?

问题描述

我正在使用JavaScript for循环，我的代码在这里

  content =; （var i = 0; i <13; i ++）{
 var alt = glevel [i] .getAttribute（name）; （$ .browser.msie&& parseInt（$。browser.version，10）=== 8 | 
 if（jQuery.inArray（alt，clickArray）> -1） | $ .browser.msie&& parseInt（$。browser.version，10）=== 7）{
 content + =< li id ='+ alt +'style ='cursor：指针; filter：alpha（opacity = 50）;'>+ alt +< br>< div style ='width：auto;'>< img src ='products / >< 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 +'>点击此处查看产品信息< / p>< / li> \\\
; 
} 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'>点击Base To Select< / font> < / div>< br>< p style ='text-decoration：none; color：#ffffff; font-size：10px; margin-top：-18px;'id ='+ alt +'>点击此处查看产品信息< / p>< / li> \\\
; 
} 
 //$('#'+clickArray[alt]+\"\" ).css(\"opacity\",\"0.5）; 
} else {
 content + =< li id ='+ alt +'style ='cursor：pointer'>+ alt +< div style ='width ：>< 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> \\\
; 
} 
 $（＃step_2）。html（content）; 
} 
  

这段代码的输出是这样的： - $ / b $
$ b

  image1 image2 image3 image4 
 image5 image6 
 image7 image8 image9 image10 
 image11 image12 image13 
 
更新： - 它看起来像是因为我的表宽度和高度
  

它工作得很好，显示真实的产品图片我有什么。

现在我想显示这样的东西： - $ / b>

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


表示在第一行4张图片，而第2,3,4行则有3张图片 / var>

  for（var i = 0; i <13; i ++）{
 content + =...; 
 
 if（i == 3）//第四行后面，
 content + ='< br />< br />'; //添加一个空行
 if（i> 3&（i-4）％3 == 2）//然后，在每三行之后加
 content + ='< br /><峰; br />'; //添加一个空行
 
  

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

解决方案

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
}

这篇关于JavaScript的循环工作方式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！