如何避免循環中的雙重分隔？

我的代碼如下所示：

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的鋰。但我有另一個分裂問題。它將循環內的「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，等等，但分爲0-3-6等，jCarousel插入空白李1-2,4-5,7-8。

我該如何避免循環內的「x」分割？

Tnak你！

來源

2010-06-17 ignaty

請編輯問題並正確縮進代碼。謝謝。 – 2010-06-17 09:47:00

不要明白我需要如何編輯問題和縮進代碼。抱歉。 – ignaty 2010-06-17 09:51:11

剛使用表達式(x/3)而不是x，你需要一個增量計數

來源

2010-06-17 09:52:53 maerics

我認爲你也需要轉換爲一個整數 - 默認情況下，JavaScript做浮點除法，這樣就會給「jcarousel-item-0.33333333」等... – psmears 2010-06-17 09:55:14

不，x/3工作正常。謝謝！ – ignaty 2010-06-17 09:59:19

@psmears：true，但當需要這個值時，x總是3的偶數，因爲他得到的值是（0,3,6）並且想要（0,1,2），除非我誤解了某些東西。 – maerics 2010-06-17 09:59:55

創建另一個變量，如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 (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">'; 
}

來源

2010-06-17 09:49:54 MrSoundless

默認情況下JavaScript不會執行浮點除法 - 所以這會給「jcarousel-item-0.33333333」等？ – psmears 2010-06-17 09:54:31

請參閱編輯，因爲評論中沒有格式 – MrSoundless 2010-06-17 10:10:30

我不知道我理解你的問題，但有在該代碼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">'

來源

2010-06-17 09:50:29 grapefrukt

沒有真正發生。 – ignaty 2010-06-17 09:54:32

嘗試設置：

y=Math.floor(x/3);

只是在創建<li>之前，然後使用y代替x時構建<li>。

來源

2010-06-17 09:53:22 psmears

如果我這樣做，那麼輸出是0-3-3-1-1-2-2。 – ignaty 2010-06-17 09:57:18

你可以發佈修改後的代碼嗎？您需要在使用之前立即設置「y」。你可能需要使用一個不是'y'的名字（這只是一個例子），這取決於它在代碼中的用途（因爲我注意到你也在其他地方使用'y'） – psmears 2010-06-17 10:10:20

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等。審查你的條件，並作出相應的變化。

來源

2010-06-17 09:53:36 chedine

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的倍數時，纔會將其添加到您的輸出中。更改條件。

不，不要創建另一個變量，但清理你的代碼。

來源

2010-06-17 09:54:06

謝謝，但清理我的第一個我的生活JS代碼會有點困難:) – ignaty 2010-06-17 10:00:15

如何避免循環中的雙重分隔？

回答

相關問題