Come evitare il doppio divide in loop?

Question

Grazie per il vostro aiuto.

I miei sguardi codice come:

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>';


}

e genera in questo modo:

<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>

E 'funziona come dovrebbe, mettere ogni 3 div è in li. ma ho un altro problema con la divisione. Si divide "x" all'interno del ciclo.

Ad esempio in JS:

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

E 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...

Che cosa ho bisogno è che conta va come 0-1-2-3-4-5-ecc, ma con divario va 0-3-6-ecc e jCarousel inserto in bianco li di 1-2, 4-5, 7-8.

Come posso evitare di "x" divide all'interno del ciclo?

Tnak voi!

Answer 1

Basta usare il (x/3) espressione invece di x in cui è necessario un conteggio incrementale

Answer 2

Non sono sicuro di aver capito la tua domanda, ma avendo le parentesi quadre intorno x in questo codice sembra abbastanza strano per me:

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

Provare a rimuovere loro e vedere cosa succede:

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

Answer 3

Prova impostazione:

y=Math.floor(x/3);

appena prima di creare il <li>, quindi utilizzare y al posto di x quando la costruzione del <li>.

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

Senso, si sta creando un elemento 'li' solo se il valore di 'X diviso per 3' è uguale a '0'. Ovviamente, si otterrà il conteggio come 0,3,6,9 ecc .. Recensione vostro se la condizione e apportare le modifiche di conseguenza.

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

Che cosa si aspetta? Questo si aggiunge alla vostra uscita solo se x è un multiplo di 3. Modificare la condizione.

E no, non creare un'altra variabile, ma ripulire il codice.

Answer 6

creare un'altra variabile come i = x / 3; e l'uso che invece di utilizzare i ..?

Modifica @psmears:

ha:

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

quindi se avrebbe creato quella variabile all'interno della portata di tale se -affermazione, tutto dovrebbe andare bene

così dovrebbe avere qualcosa di simile:

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">';
}