Pra selecionar TODAS as divs
você pode simplesmente usar o seletor com:
var divs = $('div'); // Armazena um `NodeList` com todos os elementos
Quantidade:
var qtd = divs.length; // Numero inteiro da quantidade de divs
Para alterar a div
desejada você pode usar a função addClass
ou css
do jquery
, lembre-se que a contagem das divs
se inicia do 0 então se você quiser trocar por exemplo a cor da fonte da quarta div
ficaria assim:
$(divs[3]).addClass('red');
var divs = $('div');
var length = divs.length;
$(divs[3]).addClass('red');
// Ou
$(divs[3]).css({
color: 'red'
});
.red {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>10</div>
<div>11</div>
<div>12</div>
Para alterar as divs
com repetição (de 4 em 4) você pode utilizar o seletor css
nth-child(xn+x)
, que funciona da seguinte maneira:
$('div:nth-child(4n+0)').css({
color: 'red'
});
Explicação:
nth-child
seleciona o numero da div
que você quer por exemplo :nth-child(1)
, selecione o primeiro elemento e assim por diante, se você utilizar como no exemplo acima ele usara a seguinte lógica:
:nth-child(4n...
pule de 4 em 4.
...+0)
começando do 0
Você pode testar alterando os numeros:
:nth-child(2n+1)
"Pule de 2 em 2 começando do primeiro"