Skip to main content
adicionou 594 caracteres ao conteúdo
Fonte Link
RFL
  • 6,3mil
  • 3
  • 35
  • 66

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"

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>

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"

Fonte Link
RFL
  • 6,3mil
  • 3
  • 35
  • 66

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>