função para contar quantidade de DIVs [fechada] – javascript jquery

Pergunta:


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.

Autor da pergunta carlos giovani casilo

Resposta RFL:

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”

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>

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

Fonte

Related Posts:

Qual a diferença entre AppCompatActivity e Activity? – android android-activity
Pergunta: Qual a diferença da AppCompatActivity para Activity ? A partir de qual versão a AppCompatActivity foi adicionada ao Android? Autor da pergunta Luhhh A diferença reside ...
Como abreviar palavras em PHP? – php string
Pergunta: Possuo informações comuns como nome de pessoas e endereços, e preciso que elas contenham no máximo 30 caracteres sem cortar palavras. Exemplo: 'Avenida Natalino João Brescansin' ...
Qual é a finalidade de um parêntese vazio numa declaração Lambda? – c# expressões-lambda característica-linguagem
Pergunta: Criei um exemplo de uma declaração Lambda sem argumentos, entretanto, estou com duvidas referente a omissão do parêntese vazio () na declaração. Veja o exemplo: class ...
Boas práticas para URI em API RESTful – api rest restful
Pergunta: Estou com dúvida em relação às URIs de alguns recursos da api que estou desenvolvendo. Tenho os recursos projetos e atividades com relação 1-N, ...
Dúvidas sobre a integração do MySQL com Java – java mysql netbeans
Pergunta: Estou criando um sistema no NetBeans, utilizando a linguagem Java e o banco de dados MySQL. Escrevi o seguinte código para realizar a conexão ...
Qual é a finalidade da pasta Model do framework Inphinit? – php inphinit
Pergunta: No Inphinit micro-framework existe a pasta Model que fica dentro da pasta application, e nela é onde ficam as classes, mas eu estou muito ...
Uso do ‘@’ em variáveis – javascript typescript coffeescript
Pergunta: Vejo em algumas linguagens que compilam para javascript, como TypeScript e CoffeeScript, o uso do @ em variáveis, como também, casos em que o ...
Qual tamanho máximo um arquivo JSON pode ter? – json arquivo
Pergunta: Vou dar um exemplo para conseguir explicar minha duvida: Preciso recuperar informação de imagens vindas de uma API, esse banco de imagens me retorna JSON's ...
O que é Teste de Regressão? – terminologia engenharia-de-software testes
Pergunta: Na matéria de Teste de Software o professor abordou um termo chamado Teste de Regressão, isto dentro da disciplina de teste de software. Sendo ...
O que é um construtor da linguagem? – php característica-linguagem
Pergunta: Em PHP, já li e ouvi várias vezes a respeito dos Construtores da Linguagem. Os casos que sempre ouvi falar deles foi em casos ...
Função intrínseca para converter numérico para string – cobol
Pergunta: Estou a tentar saber se existe alguma função intrínseca do COBOL para converter um data numérico para string sem precisar usar a cláusula REDEFINES: ( ...
Porque usar implements? – java android
Pergunta: Qual a diferença entre usar btn.setOnClickListener(new OnClickListener() { e public class MainActivity extends Activity implements OnClickListener{ Estive fazendo um curso de Android e meu professor falou que ...
O que é XHTML e quando deve ser usado? – html xml xhtml
Pergunta: O que eu sei é que o XHTML precisa ser XML válido. Isso implica, por exemplo, que todas as tags precisam ser fechadas. Por ...
Uma placa aceleradora de vídeo pode melhorar o desempenho não-gráfico? [fechada] – desempenho
Pergunta: Para desenvolver em Ruby on Rails, eu utilizo aqui uma máquina virtual do VirtualBox com Ubuntu Server 14.04 sem interface gráfica instalada. Recentemente descobri uma ...
Concat() VS Union() – c# .net
Pergunta: Qual a diferença entre Concat() e Union() ? Quando usar Concat() e quando usar Union() ? Somente pode ser usado em list ? ...

Deixe uma resposta

O seu endereço de email não será publicado. Campos obrigatórios marcados com *