5

O problema é o seguinte, eu tenho 9 li dentro de um ul

<ul>
  <li>Teste1</li>
  <li>Teste2</li>
  <li>Teste3</li>
  <li>Teste4</li>
  <li>Teste5</li>
  <li>Teste6</li>
  <li>Teste7</li>
  <li>Teste8</li>
  <li>Teste9</li>
</ul>

E estou percorrendo a lista desse modo:

$('li').each(function(index,value){
    if(index==0){
        $(this).css('color','red');
    } else if (index==1){
        $(this).css('color','blue');
    } else if (index==2){
        $(this).css('color','green');
    }
})

Até aí tudo bem, porém eu queria adicionar as cores sempre no Teste 1, Teste 4, Teste 7, a condição seria i+3 para o vermelho no exemplo, porém não estou entendendo onde colocar esse outro for. Seria dentro do index?

3 Respostas 3

8

Pode usar o módulo/resto de divisão:

$('li').each(function(index,value){
  if((index%3)==0){
    $(this).css('color','red');
  } else if ((index%3)==1){
    $(this).css('color','blue');
  } else if ((index%3)==2){
    $(this).css('color','green');
  }
})


Funcionamento

O % calcula o resto da divisão inteira, veja aplicado aos índices:

0 / 3 = 0, resto 0
1 / 3 = 0, resto 1
2 / 3 = 0, resto 2
3 / 3 = 1, resto 0
4 / 3 = 1, resto 1
5 / 3 = 1, resto 2
6 / 3 = 2, resto 0
7 / 3 = 2, resto 1

e assim por diante.


Demonstração

Execute o código abaixo aqui mesmo no SOpt, e veja em funcionamento:

$('li').each(function(index,value){
  if((index%3)==0){
    $(this).css('color','red');
  } else if ((index%3)==1){
    $(this).css('color','blue');
  } else if ((index%3)==2){
    $(this).css('color','green');
  }
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul>
  <li>Teste1</li>
  <li>Teste2</li>
  <li>Teste3</li>
  <li>Teste4</li>
  <li>Teste5</li>
  <li>Teste6</li>
  <li>Teste7</li>
  <li>Teste8</li>
  <li>Teste9</li>
</ul>


Otimizando o código

Apenas para complementar, veja uma maneira simplificada de usar o módulo:

$('li').each(function(index,value){
  $(this).css('color',['red','green','blue'][index%3]);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul><li>Teste1</li><li>Teste2</li><li>Teste3</li><li>Teste4</li><li>Teste5</li><li>Teste6</li><li>Teste7</li><li>Teste8</li><li>Teste9</li></ul>

4
$('li').each(function(index,value){
  if(index%3==0){
    $(this).css('color','red');
  } else if (index%3==1){
    $(this).css('color','blue');
  } else if (index%3==2){
    $(this).css('color','green');
  }
})

Seria isso?

No caso, tem 3 cores, o '%' pega o resto da divisão pelo numero de cores e compara com cada uma.

3

O melhor seria fazer isso só com CSS...

li:nth-child(3n + 1){
    color: red;
}
li:nth-child(3n + 2){
    color: blue;
}
li:nth-child(3n){
    color: green;
}

Exemplo: https://jsfiddle.net/cjnk3xu8/

Usando o nth-child é possivel configurar o CSS para só fazer efeito de N em N elementos.


Se quiseres fazer com jQuery podes fazer assim:

var cores = ['red', 'blue', 'green'];
$('li').each(function(index, value) {
    $(this).css('color', cores[index % 3]);
});

jsFiddle: https://jsfiddle.net/cjnk3xu8/1/

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .