Como evitar a divisão dupla em loop?
https://stackoverflow.com/questions/3060492
-
28-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPergunta
Obrigado pela ajuda.
Meu código parece:
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">£'+ data.PRODUCTS[x].product_retailprice +'</span> <span class="price geo_17_darkbrown">£'+ data.PRODUCTS[x].product_webprice +'</span>';
} else {
CatItems += '<span class="price geo_17_darkbrown">£'+ 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 gera isso:
<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>
<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
<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>
Funciona como deveria, colocar a cada 3 div em Li. Mas tenho outro problema com a divisão. Divida "X" dentro do loop.
Por exemplo, em 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...
O que eu preciso é que a contagem vá como 0-1-2-3-4-5-5-ETC, mas com a divisão é 0-3-6-ETC e Jcarousel Inserir em branco Li 1-2, 4-5, 7-8 .
Como posso evitar a divisão "X" dentro do loop?
TNAK VOCÊ!
Solução
Basta usar a expressão (x/3) ao invés de x onde você precisa de uma contagem incremental
Outras dicas
Não tenho certeza se entendi sua pergunta, mas ter os colchetes em torno de X neste código parece bastante estranho para mim:
'<li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-'+[x]+' jcarousel-item-'+[x]+'-horizontal jcarousel-item-placeholder jcarousel-item-placeholder-horizontal">'
Tente removê -los e veja o que acontece:
'<li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-' + x + ' jcarousel-item-'+ x +'-horizontal jcarousel-item-placeholder jcarousel-item-placeholder-horizontal">'
Tente configurar:
y=Math.floor(x/3);
pouco antes de criar o <li>, então use y no lugar de x Quando a construção <li>.
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">';
Ou seja, você está criando um elemento 'Li' apenas se o valor de 'x dividido por 3' for igual a '0'. Obviamente, você receberá a contagem como 0,3,6,9 etc. Revise sua condição IF e faça alterações de acordo.
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">';
O que você espera? Isso é adicionado à sua saída apenas se X for um múltiplo de 3. Altere a condição.
E não, não crie outra variável, mas limpe seu código.
crie outra variável como i = x / 3; e use isso em vez de usar i ..?
Editar @psMears:
ele tem:
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">';
Então, se ele criaria essa variável dentro do escopo disso E se-Statement, tudo deve ficar bem
Então deveria ter algo como:
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">';
}
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
