Javascript or Jquery - how to do a Divs class inventory

Question

I have a div of id=colors and inside I have other Ivs with several 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>

I would like to set up a function that would determine how many Ivs with defined class and how many classes there are of each element.

I don’t know if I made myself clear.

Part one solution (Make an array with only class names). I found a solution with find:

    var array_cores = [];

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

    console.log(array_cores);

Generates a result like this;

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

Now I must count the repetitions

Answer 1

You can use the jQuery selector to do this! However, the ids must be unique. So use classes. Snippet below:

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>

The selector $('div#cores div.azul').length takes the blue class Divs that are inside the div with the color id.

EDITED

The snippet below does exactly what you want:

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>

References

• jQuery.selector()
• jQuery.each()
• Arrow Function ( ) => { }

Answer 2

You can create an array of objects with the quantities of the classes. An object array is easy after taking the values:

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>