3

Preciso saber como faço para pegar classes CSS intercaladas. Pois vou fazer um loop e preciso pegar as classes em um certo número.

O código é o seguinte:

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

Como faço para pegar essas classes com jQuery de 2 em 2, 3 em 3 e por ai vai?

Deixando claro que eu preciso contar por classes e não por elementos.

2 Respostas 2

2

Se percebi bem a questão, só tens de mexer na incrementação (intervalo) de um ciclo for/while. Neste caso vou fazer de 2 em 2. Podes fazer assim:

//var elementos = document.getElementsByClassName('box'); // Sem jquery
var elementos = $('.box'); // com jquery
var countElementos = elementos.length; // num de elementos com a classe
var intervalo = 2; // aqui decides o intervalo
var comeco = 0; // aqui decides em qual queres começar, neste caso começamos na primeira .box

for(var i = comeco; i < countElementos; i += intervalo) {
	alert('.box num ' +elementos[i].id);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="1" class='box'></div>
<div id="2" class='box'></div>
<div id="3" class='box'></div>
<div id="4" class='box'></div>
<div id="5" class='box'></div>

Nota que só coloquei ids nas .box para veres como funciona. Não são precisos.

1

Dá uma olhada a este exemplo:

var contador = 0;
$('div').each(function() {
    if ($(this).hasClass('box')) {
	    contador++;
	    this.innerHTML = contador;
	    if (contador % 2 == 0) this.style.color = 'blue'; // ou outro código que precises
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div>Eu não tenho a classe box</div>
<div>Eu não tenho a classe box</div>
<div class="box"></div>

Esse código conta somente os elementos que têm a classe que queres e usando % 2 == 0 sabes quando a contagem tem resto zero dividida por 2.

Se quiseres "ir de duas em duas" podes fazer assim também:

$('.box:nth-of-type(2n)').each(function(i) {
    this.style.color = 'blue'; // ou outro código que precises
});

jsFiddle: https://jsfiddle.net/9zz42g8g/

Se quiseres fazer coisas com CSS é melhor usa o nth-of-type(2n). Mas isso não ficou claro da tua pergunta.

3
  • Não coloquei essa parte na pergunta. O que eu vou fazer é acrescentar outra classe ao lado da classe box no html. Commented 5/06/2016 às 22:24
  • 1
    @CaiqueSouza nesse caso na linha if (contador % 2 == 0) podes continuar com $(this).addClass('novaClasse');
    – Sergio
    Commented 5/06/2016 às 22:28
  • 1
    @CaiqueSouza juntei mais uma variação mais compacta, caso seja útil.
    – Sergio
    Commented 5/06/2016 às 22:33

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 .