2

Tenho uma div de id=cores e dentro dela tenho outras divs com várias classes

<div id="cores">
    <div class="azul">conteúdo</div>
    <div class="amarelo">conteúdo</div>
    <div class="verde">conteúdo</div>
    <div class="azul">conteúdo </div>       
</div>

Gostaria de montar uma função que apurasse quantas divs que com class definida e quantas classes existem de cada elemento.

Não sei se me fiz claro.

Solução da parte um (Fazer uma array só com os nomes das classes). Achei uma solução com o find:

    var array_cores = [];

    $("#cores").find('div').each(function(){
        var classe = $(this).attr("class");
        arrayObjetos.push({classe});
    });

    console.log(array_cores);

Gera um resultado assim;

var array_cores = ["azul", "amarelo", "verde", "azul"];

Agora preciso contar as repetições

4
  • O id deve ser único em cada página.
    – MagicHat
    3/07/2018 às 23:55
  • Desculpe, errei na hora de escrever aqui, estão como classes, vou arrumar 3/07/2018 às 23:58
  • Uma função que monte um array dos nomes das classes e a quantidades de repetições dessa classe 3/07/2018 às 23:59
  • ahh entendi....
    – Sam
    4/07/2018 às 0:00

2 Respostas 2

3

Você pode usar o selector do jQuery pra fazer isso! Porém, os ids devem ser únicos. Então, use classes. Snippet abaixo:

console.log($('div#cores div.azul').length, 'azuis')
console.log($('div#cores div.amarelo').length, 'amarelos')
console.log($('div#cores div.verde').length, 'verdes')
.verde {
  color: green
}

.azul {
  color: blue
}

.amarelo {
  color: yellow
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cores">
    <div class="verde">conteúdo</div>
    <div class="azul">conteúdo</div>
    <div class="amarelo">conteúdo</div>
    <div class="verde">conteúdo</div>
    <div class="azul">conteúdo </div>
    <div class="verde">conteúdo</div>       
</div>

O selector $('div#cores div.azul').length pega as divs com classe azul que estão dentro da div com o id cores.

EDITADO

O snippet abaixo faz exatamente o que você deseja:

const listaClasses = {}

$('div').each((index,tag) => {
    var classes = $(tag).attr('class') // Busca as classes de cada div
    if(classes != undefined){
      classes.split(' ').map((classe) => { // Separa cada tag e insere no arranjo
         if(classe != undefined){
           listaClasses[classe] = 0 // Define o contador como 0
         }
      })
   }  
})

console.log(listaClasses) // Exibe quais classes existem

const classes = Object.keys(listaClasses)

classes.map(classe => {
  listaClasses[classe] = $(`.${classe}`).length // Grava a quantidade de cada classe
}) // Verifica quais contém cada classe

console.log(listaClasses)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cores">
    <div class="verde">conteúdo</div>
    <div class="azul">conteúdo</div>
    <div class="amarelo">conteúdo</div>
    <div class="verde">conteúdo</div>
    <div class="azul">conteúdo </div>
    <div class="verde">conteúdo</div>       
</div>

Referências

6
  • Então, mas, daí eu precisaria saber os nomes das classes que estarão na páginas, tem como fazer uma função que ele varra a página e informe que nesta páginas existem 10 divs com a classe "x", 5 divs com a classe "Y", sem eu presquisar pelo nome da classe? 4/07/2018 às 0:04
  • 1
    Bom, isso é muito específico! O selector precisa de algo definido para fazer a busca. Você poderia ter um arranjo com todas as classes, e um for que iria procurar cada classe dentro da página
    – reisdev
    4/07/2018 às 0:06
  • Se quiser, posso adicionar um exemplo à minha resposta, caso tenha ficado confuso
    – reisdev
    4/07/2018 às 0:09
  • @AlêMoraes , feito. Dá uma olhada no snippet que acrescentei!
    – reisdev
    4/07/2018 às 0:47
  • Valeu cara, eu consegui com each fazer uma array só com os nomes das classes, agora vou fazer de novo um each nessa array, vou incluir na pergunta 4/07/2018 às 1:04
1

Pode criar um array de objetos com as quantidades das classes. Um array de objetos fica fácil depois de pegar os valores:

var cores = []; // cria a array;
$("#cores div").each(function(){
   var existe = false; // flag
   for(var x=0; x<cores.length; x++){ // percorre a array pra ver se já existe
      if(Object.keys(cores[x])[0] == this.className){
         existe = true;
         break; // se existe, altero a flag e paro o for
      }
   }
   
   if(!existe){
       var obj = {} // cria o objeto
       obj[this.className] = 1; // cria a chave com valor 1
       cores.push(obj); // adiciona o objeto na array
   }else{
       cores[x][this.className] = cores[x][this.className]+1; // soma mais um na quatidade
   }
});
console.log(cores);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cores">
    <div class="azul">conteúdo</div>
    <div class="amarelo">conteúdo</div>
    <div class="verde">conteúdo</div>
    <div class="azul">conteúdo </div>       
    <div class="amarelo">conteúdo</div>
    <div class="verde">conteúdo</div>
    <div class="azul">conteúdo </div>       
    <div class="amarelo">conteúdo</div>
    <div class="azul">conteúdo </div>       
    <div class="branco">conteúdo </div>       
    <div class="azul">conteúdo </div>       
</div>

2
  • Perfeito cara era isso mesmo que eu queria, obrigado, preciso aprender a trabalhar com objetos 4/07/2018 às 2:46
  • Legal! Dei uma atualizada, acho que ficou melhor.
    – Sam
    4/07/2018 às 4:06

Você deve fazer log-in para responder a esta pergunta.

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