如何避免循环中的双重除法？答案

【问题标题】：How to avoid double divide in loop?如何避免循环中的双重除法？
【发布时间】：2010-06-17 09:41:43
【问题描述】：

感谢您的帮助。

我的代码如下：

var CatItems = "";

for(var x=0; x < data.PRODUCTS.length; x++) {
if (x % 3 === 0) CatItems += '<li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-'+[x]+' jcarousel-item-'+[x]+'-horizontal jcarousel-item-placeholder jcarousel-item-placeholder-horizontal">';
CatItems += '<div><a class="large_image" href="#"><img  src="'+ data.PRODUCTS[x].product_img +'" alt="' + data.PRODUCTS[x].product_name +'"></a><h3 class="geo_17_darkbrown">' + data.PRODUCTS[x].product_name +'</h3>';

if ( data.PRODUCTS[x].product_onsale==1 ) {
CatItems += '<img alt="sale" src="assets/images/sale.gif" class="sale"><span class="geo_17_red_linethr">&pound;'+ data.PRODUCTS[x].product_retailprice +'</span>&nbsp;&nbsp;<span class="price geo_17_darkbrown">&pound;'+ data.PRODUCTS[x].product_webprice +'</span>';
} else {
CatItems += '<span class="price geo_17_darkbrown">&pound;'+ data.PRODUCTS[x].product_webprice +'</span>';
}

if ( data.PRODUCTS[x].product_COLOURS ) {
CatItems += '<span class="colour">';

 for(var y=0; y < data.PRODUCTS[x].product_COLOURS.length; y++) {

CatItems += '<span><a href="'+ data.PRODUCTS[x].product_COLOURS[y].colours_large +'"><img src="'+ data.PRODUCTS[x].product_COLOURS[y].colours_thumb +'" alt="'+ data.PRODUCTS[x].product_COLOURS[y].colour_name +'" /></a></span>';
}

CatItems += '</span>';
}

CatItems += '</div>';

if (x % 3 === 2) CatItems += '</li>';


}

它会生成这个：

<div class="carousel_00 jcarousel-container jcarousel-container-horizontal" style="position: relative; display: block;">            
  <div class="jcarousel-clip jcarousel-clip-horizontal" style="overflow: hidden; position: relative;">
    <ul class="jcarousel-list jcarousel-list-horizontal" style="overflow: hidden; position: relative; top: 0px; left: 0px; margin: 0px; padding: 0px; width: 7890px;">
      <li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-0 jcarousel-item-0-horizontal jcarousel-item-placeholder jcarousel-item-placeholder-horizontal">
        <div>
          <a href="#" class="large_image">
            <img alt="Elena Top" src="assets/images/dress1.gif"></a>
          <h3 class="geo_17_darkbrown">Elena Top</h3>
          <img class="sale" src="assets/images/sale.gif" alt="sale">
          <span class="geo_17_red_linethr">£120
          </span>&nbsp;&nbsp;
          <span class="price geo_17_darkbrown">£100
          </span>
          <span class="colour">
            <span>
              <a href="assets/images/colour.gif">
                <img alt="Black" src="assets/images/black.gif"></a>
            </span>
            <span>
              <a href="assets/images/colour.gif">
                <img alt="Brown" src="assets/images/brown.gif"></a>
            </span>
            <span>
              <a href="assets/images/colour.gif">
                <img alt="Purple" src="assets/images/purple.gif"></a>
            </span>
          </span>
        </div>
        <div>
          <a href="#" class="large_image">
            <img alt="Rachel Dress" src="assets/images/dress2.gif"></a>
          <h3 class="geo_17_darkbrown">Rachel Dress</h3>
          <span class="price geo_17_darkbrown">£120
          </span>
        </div>
        <div>
          <a href="#" class="large_image">
            <img alt="Elena Top" src="assets/images/dress3.gif"></a>
          <h3 class="geo_17_darkbrown">Elena Top</h3>
          <span class="price geo_17_darkbrown">£120
          </span>
        </div>
      </li>
      <li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-1 jcarousel-item-1-horizontal jcarousel-item-placeholder jcarousel-item-placeholder-horizontal" style="float: left; list-style: none outside none;" jcarouselindex="1">
      </li>
      <li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-3 jcarousel-item-3-horizontal jcarousel-item-placeholder jcarousel-item-placeholder-horizontal">
        <div>
          <a href="#" class="large_image">
            <img alt="Elena Top" src="assets/images/dress1.gif"></a>
          <h3 class="geo_17_darkbrown">Elena Top</h3>
          <span class="price geo_17_darkbrown">£120
          </span>
        </div>
        <div>
          <a href="#" class="large_image">
            <img alt="Elena Top" src="assets/images/dress2.gif"></a>
          <h3 class="geo_17_darkbrown">Elena Top</h3>
          <span class="price geo_17_darkbrown">£120
          </span>
        </div>
        <div>
          <a href="#" class="large_image">
            <img alt="Elena Top" src="assets/images/dress3.gif"></a>
          <h3 class="geo_17_darkbrown">Elena Top</h3>
          <span class="price geo_17_darkbrown">£120
          </span>
        </div>
      </li>
      <li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-6 jcarousel-item-6-horizontal jcarousel-item-placeholder jcarousel-item-placeholder-horizontal">
        <div>
          <a href="#" class="large_image">
            <img alt="Elena Top" src="assets/images/dress3.gif"></a>
          <h3 class="geo_17_darkbrown">Elena Top</h3>
          <span class="price geo_17_darkbrown">£120
          </span>
        </div>
        <div>
          <a href="#" class="large_image">
            <img alt="Elena Top" src="assets/images/dress3.gif"></a>
          <h3 class="geo_17_darkbrown">Elena Top</h3>
          <span class="price geo_17_darkbrown">£120
          </span>
        </div>
      </li>
    </ul>
  </div>
  <div class="jcarousel-prev jcarousel-prev-horizontal jcarousel-prev-disabled jcarousel-prev-disabled-horizontal" style="display: block;" disabled="true">
  </div>
  <div class="jcarousel-next jcarousel-next-horizontal" style="display: block;" disabled="false">
  </div>            
  <div class="jcarousel-control geo_10_darkbrown_capital">          7 products&nbsp;&nbsp;&nbsp;                  
    <a href="#">1</a>                 
    <a href="#">2</a>                 
    <a href="#">3</a>                         
    <a href="#">4</a>                 
    <a href="#">5</a>                 
    <a href="#">6</a>                 
    <a href="#" class="last">7</a>              
  </div>        
</div>

它应该像它应该的那样工作，将每 3 个 div 放在 li 中。但我有另一个分歧的问题。它在循环内划分“x”。

例如在 JS 中：

<li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-'+[x]+' jcarousel-item-'+[x]+'-horizontal jcarousel-item-placeholder jcarousel-item-placeholder-horizontal">

而 HTML 输出是：

<li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-0 jcarousel-item-0-horizontal jcarousel-item-placeholder jcarousel-item-placeholder-horizontal"></li>

then

<li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-3 jcarousel-item-3-horizontal jcarousel-item-placeholder jcarousel-item-placeholder-horizontal"></li>

then

<li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-6 jcarousel-item-6-horizontal jcarousel-item-placeholder jcarousel-item-placeholder-horizontal"></li>

etc...

我需要的是计数为 0-1-2-3-4-5-etc，但除以 0-3-6-etc 和 jCarousel 插入空白 li 的 1-2、4-5， 7-8.

如何避免循环内出现“x”分割？

了解你！

【问题讨论】：

请编辑问题并正确缩进您的代码。谢谢。
不要明白我需要如何编辑问题和缩进代码。对不起。

标签： javascript html loops divide

【解决方案1】：

只需使用表达式 (x/3) 而不是 x 在您需要增量计数的地方

【讨论】：

我认为您也需要转换为整数 - 默认情况下，javascript 会进行浮点除法，因此会给出“jcarousel-item-0.33333333”等...
@psmears: true，但是当需要这个值时，x 总是 3 的偶数倍，因为他得到的值是 (0,3,6) 并且想要 (0,1,2) ，除非我误解了什么......
@ignaty：如果你觉得这是正确的答案，你可以点击它旁边的复选标记，这样其他人就会看到这个问题已经回答了。

【解决方案2】：

我不确定我是否理解你的问题，但是在这段代码中 x 周围的方括号对我来说似乎很奇怪：

'<li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-'+[x]+' jcarousel-item-'+[x]+'-horizontal jcarousel-item-placeholder jcarousel-item-placeholder-horizontal">'

尝试删除它们，看看会发生什么：

'<li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-' + x + ' jcarousel-item-'+ x +'-horizontal jcarousel-item-placeholder jcarousel-item-placeholder-horizontal">'

【讨论】：

【解决方案3】：

尝试设置：

y=Math.floor(x/3);

就在创建<li> 之前，然后在构造<li> 时使用y 代替x。

【讨论】：

如果我这样做，那么输出是0-3-3-1-1-2-2。
可以贴出修改后的代码吗？您需要在使用前立即设置y。而且您可能需要使用 y 以外的名称（这只是一个示例），具体取决于它在代码中的使用位置（因为我注意到您在其他地方也使用了 y！）

【解决方案4】：

if (x % 3 === 0) CatItems += '<li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-'+[x]+' jcarousel-item-'+[x]+'-horizontal jcarousel-item-placeholder jcarousel-item-placeholder-horizontal">';

意思是，只有当 'x 除以 3' 的值等于 '0' 时，你才创建一个 'li' 元素。显然，您将得到 0、3、6、9 等计数。检查您的 if 条件并相应地进行更改。

【讨论】：

【解决方案5】：

if (x % 3 === 0) CatItems += '<li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-'+[x]+' jcarousel-item-'+[x]+'-horizontal jcarousel-item-placeholder jcarousel-item-placeholder-horizontal">';

你期待什么？仅当 x 是 3 的倍数时才会将其添加到您的输出中。更改条件。

不，不要创建另一个变量，而是清理你的代码。

【讨论】：

谢谢，但是清理我人生中的第一个 JS 代码会有点困难 :)

【解决方案6】：

创建另一个变量，例如 i = x / 3;并使用它而不是使用 i..？

编辑@psmears：

他有：

if (x % 3 === 0)
   CatItems += '<li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-'+[x]+' jcarousel-item-'+[x]+'-horizontal jcarousel-item-placeholder jcarousel-item-placeholder-horizontal">';

因此，如果他在该 if 语句的范围内创建该变量，那么一切都应该没问题

所以应该有类似的东西：

if (x % 3 === 0)
{
    var i = x / 3;
    CatItems += '<li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-'+i+' jcarousel-item-'+i+'-horizontal jcarousel-item-placeholder jcarousel-item-placeholder-horizontal">';
}

【讨论】：

默认情况下javascript不做浮点除法 - 所以会给出“jcarousel-item-0.33333333”等？