如何避免循环中的双重划分？

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 out是：

<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;并使用它而不是使用我..？

编辑@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 -statement的范围内创建该变量，那么一切都应该没问题

所以应该有类似的东西：

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

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