Preciso criar uma função para verificar a quantidade de DIVs na tela e inserir uma class dentro da quarta por exemplo. Essas DIVs são criadas dinamicamente.
5 Respostas
Pelo problema que você apresentou, não é necessário o uso de Javascript. O incremento na contagem de elementos pode ser feito através da propriedade counter-increment
e a soma dos elementos pode ser feito com a função counter()
.
Obter o quarto elemento, pode ser feito com as pseudo classes nth-child
ou nth-of-type
.
/* Todo elemento <div> irá incrementar o contador "divnumber". */
div {
counter-increment: divnumber
}
/* "counter" irá pegar o valor de "divnumber". */
span::after {
content: 'Existem ' counter(divnumber) ' divs.'
}
/* ntd-child irá pegar o quarto elemento <div>. */
div:nth-child(4) {
color: red
}
<div>div1</div>
<div>div2</div>
<div>div3</div>
<div>div4</div>
<div>div5</div>
<br><br>
<span></span>
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"
-
-
Preciso complicar um pouco, como eu posso fazer para essa função com as DIVs e de 4 em 4 ela acrescente um class? Commented 13/06/2017 às 17:43
-
@carlosgiovanicasilo sugiro que faça isso com
css
puro, seria mais facil, mas vou adicionar a na resposta.– RFLCommented 13/06/2017 às 19:33 -
Ajustei o código para contar as divs e só preencher caso tenha acima de 3. Pego todas as divs que contém a classe 'd' para contagem e modificação.
jQuery(document).ready(function(){
if(jQuery('.d').length > 3){
jQuery(jQuery('.d')[3]).addClass('red');
} else{
alert('A quantidade de divs na tela é inferior a 4');
}
})
.red{
background: red;
width: 200px;
height: 200px;
float:left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="d"></div>
<div class="d"></div>
<div class="d"></div>
<div class="d"></div>
<div class="d"></div>
-
1Sua função não está verificando a quantidade de divs existentes. Dá para reverter o negativo.– MagicHatCommented 13/06/2017 às 14:52
-
$(document).ready(function()
{
$('div').each(function(i, value)
{
if(i ==3)
{
$(value).addClass('teste');
}
});
});
Como a pergunta não especificou o uso de JQuery, acho que cabe uma solução com Javascript Vanilla:
// Obter a quantidade de divs
var quantidadeDivs = document.getElementsByTagName("div").length;
// Obter array com todas as divs da página
var divs = document.getElementsByTagName("div");
// Adicionando a classe vermelho na quarta div
divs[3].classList.add('vermelho');
console.log(document.querySelectorAll('div').length);
Vai contar o total de divs que você tem no DOM. Sua dúvida está um pouco confusa, por exemplo você vai inserir sempre na 4 div que encontrar no documento, ou seja é fixo? Existe algum botão ou evento que vai acionar a inserção da classe?