Javascript or Jquery - how to do an inventory of divs classes

Question

Javascript or Jquery - how to do an inventory of divs classes

Navigation

#1 by (3 votes)
#2 by (1 votes)

2

I have a div of id = colors and inside it I have other divs 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 check how many divs with class defined and how many classes exist for each element.

I do not know if I made myself clear.

Solution of part one (Make an array only with 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);

Generate a result like this;

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

Now I need to count the repetitions

javascript jquery

asked by anonymous 04.07.2018 / 01:53

2 answers

3

You can use the jQuery selector to do this! However, ids must be unique. Then 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><divid="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 $('div#cores div.azul').length selector takes the blue class divs that are inside the div with the id colors.

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><divid="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

04.07.2018 / 02:00

Counting 'nan' and 'null' values in a pandas dataframe Focus on the next input when reaching the maximum number of characters

score 1 · Accepted Answer

You can create an array of objects with the quantities of the classes. An array of objects becomes easy once you get 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><divid="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>