3

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.

3
  • 1
    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?
    – Marconi
    13/06/2017 às 14:46
  • Veja funcionado Fiddle
    – Marconi
    13/06/2017 às 14:51
  • "Na tela" você diz na página inteira ou apenas na parte visível da página?
    – Woss
    13/06/2017 às 15:03

5 Respostas 5

8

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>

0
4

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"

4
  • Muito obrigado pela ajuda. 13/06/2017 às 17:09
  • Preciso complicar um pouco, como eu posso fazer para essa função com as DIVs e de 4 em 4 ela acrescente um class? 13/06/2017 às 17:43
  • @carlosgiovanicasilo sugiro que faça isso com css puro, seria mais facil, mas vou adicionar a na resposta.
    – RFL
    13/06/2017 às 19:33
  • Caleu mesmo pela ajuda, muito obrigado. 14/06/2017 às 12:04
1

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>

2
  • 1
    Sua função não está verificando a quantidade de divs existentes. Dá para reverter o negativo.
    – MagicHat
    13/06/2017 às 14:52
  • @MagicHat alteração feita. 13/06/2017 às 15:01
0
 $(document).ready(function() 
            {
                $('div').each(function(i, value)
                    {
                        if(i ==3)
                        {
                            $(value).addClass('teste');
                        }
                    });

            });
0
0

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');

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