CODEWITHSUNDEEP
jquery
djmg
djmg

Reputation: 1

jQuery: Count different children with same class in loop

Let's assume i have HTML like this:

<div class="somediv"></div> 
<div class="children child1">Text</div>
<div class="children child1">Text</div>
<div class="children child1">Text</div>
<div class="children child2">Text</div>
<div class="children child2">Text</div>
<div class="children child2">Text</div>
<div class="children child2">Text</div>
<div class="children child2">Text</div>
<div class="children child3">Text</div>
<div class="children child3">Text</div>
<div class="someotherdiv"></div> 

... child 4, child 5 etc. child n;

How can i create a jQuery loop, where i count how many .child1, .child2, .child3, ... exist?

p.s.: function .length(); does not work for now, so maybe let's find an alternative to that. Furthermore there will be many other divs in DOM with multiple other classes, which should not be treated/affected here (performance).

Upvotes: 0

Views: 114

Answers (2)

Terry
Terry

Reputation: 66103

You don't need to use jQuery for that actually: using plain JavaScript can easily get the job done. All you need is to use a selector that will apply to your elements of interest (in this case, I've ran with div, but you can use, for example, .children to narrow your selection down).

Once you've retrieved the HTMLCollection, you simply iterate through it. For every HTML element you encounter, you iterate through its classList property and push them/increment their corresponding value in a dictionary:

const classDictionary = {};
const els = document.querySelectorAll('div');

Array.from(els).forEach(el => {
  el.classList.forEach(className => {
    if (!(className in classDictionary)) {
      classDictionary[className] = 1;
    } else {
      classDictionary[className]++;
    }
  });
});

console.log(classDictionary);
<div class="children child1">Text</div>
<div class="children child1">Text</div>
<div class="children child1">Text</div>
<div class="children child2">Text</div>
<div class="children child2">Text</div>
<div class="children child2">Text</div>
<div class="children child2">Text</div>
<div class="children child2">Text</div>
<div class="children child3">Text</div>
<div class="children child3">Text</div>

Of course, if you really have to use jQuery, that's also entirely possible:

$(function() {
  const classDictionary = {};
  
  $('div').each(function() {
    this.classList.forEach(className => {
      if (!(className in classDictionary)) {
        classDictionary[className] = 1;
      } else {
        classDictionary[className]++;
      }
    });
  });

  console.log(classDictionary);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="children child1">Text</div>
<div class="children child1">Text</div>
<div class="children child1">Text</div>
<div class="children child2">Text</div>
<div class="children child2">Text</div>
<div class="children child2">Text</div>
<div class="children child2">Text</div>
<div class="children child2">Text</div>
<div class="children child3">Text</div>
<div class="children child3">Text</div>

Upvotes: 1

Phuc Duong
Phuc Duong

Reputation: 9

if you know n value already this is the way to get it

n = 5; arr = [];
   for(i = 1; i <= n; i++){
        abc = ".children.child" + i ;
        console.log($(abc).length);
        arr[abc ] = $(abc).length;
   }
  console.log(arr);

Upvotes: 0

Related Questions