javascript - 如何避免循环中的双重除法？

Question

感谢您的帮助。

我的代码如下所示：

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”除法？

干你！

Answer 1

创建另一个变量，例如 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">';
}

Answer 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">'

Answer 3

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

Answer 4

尝试设置：

y=Math.floor(x/3);

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

Answer 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' 的值等于 '0' 时，您才创建一个 'li' 元素。显然，您将获得 0、3、6、9 等计数。检查您的 if 条件并相应地进行更改。

Answer 6

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 的倍数时才会将其添加到您的输出中。更改条件。

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