How to find max number of children elements in divs with same class name

Question

So, I have a html calendar that I need to loop through and find elements within a week, and then compare weeks to find the week that has the largest amount of elements. My structure looks something like this:

    <div class="week">
       <div class="day">
       </div>
       <div class="day">
       </div>
       <div class="day">
          <div id="unique-number" class="target-element"></div>
          <div id="unique-number" class="target-element"></div>
          <div id="unique-number" class="target-element"></div>
       </div>
       <div class="day">
       </div>
       <div class="day">
          <div id="unique-number" class="target-element"></div>
          <div id="unique-number" class="target-element"></div>
       </div>
       <div class="day">
       </div>
       <div class="day">
          <div id="unique-number" class="target-element"></div>
       </div>
    </div>
    <div class="week">
       <div class="day">
       </div>
       <div class="day">
          <div id="unique-number" class="target-element"></div>
       </div>
       <div class="day">
       </div>
       <div class="day">
       </div>
       <div class="day">
          <div id="unique-number" class="target-element"></div>
       </div>
       <div class="day">
       </div>
       <div class="day">
       </div>
    </div>

So, the goal would be to loop through there and see that the first week has 6 target elements and the second week has 2 target elements.

Here is what I've tried so far:

var maxDay = new Array();
        $('.week').each(function() {

            maxDay.push($(this).children( '.target-element' ));
            console.log( maxDay );

        });

I've tried about a thousand variations of that, and no dice.

Any help would be much appreciated.

EDIT: I probably should specify that my javascript was just the start of trying to build an array with the values for each week, to then compare using Math.max.apply(Math,maxDay);, but the array is not building as I would hope, and either seem to put EVERY element of the whole calendar in the array, or nothing at all.

EDIT: I realized that I actually need to be targeting unique div IDs instead of just the .target-element. They are actually the same div, but for my purposes I want to get all the unique div id numbers, loop through those by week, so I can add a grid-row-start css position.

My goal is to get rid of all the empty space I'm having in my calendar event structure.

Its so close too! For some reason looping through each week has become a huge mental block for me.

I'm able to get all the unique divs doing this:

var b = new Array();
        $('.inner-pto-cal').each(function () {
            b.push($(this).parent().attr("id"));
            //console.log( b );
        });

I just want to get that per week, so I can then loop through per week to incrementally add to the grid-row-start, and then reset at the next week loop.

Currently this is what I have for the whole month that is working:

for (var i = 2; i < uniq.length; i++) {

            $('#' + (uniq[i]) + '.pto-cal-link').each(function () {
            //change the grid-row-position
                $(this).css('grid-row-start' , ''+i );
                console.log('#'+uniq[i]);
                //console.log(q);
            });

        }

So the goal is to find the `.week` with the largest count of `.target-element` right? — Carl Binalla, Nov 19 '19 at 08:41
Yeah, that would be the goal. And then ultimately return that number and assign it to a CSS property for EVERY week. That last bit I believe I can handle :D. — Ben Calhoun, Nov 19 '19 at 08:44
you might want to check this question, https://stackoverflow.com/questions/3468082/how-to-select-nested-dom-elements-inside-ul-element after the awnser just compare the lenghts of the arrays — Odinh, Nov 19 '19 at 08:46

Divyesh patel · Accepted Answer · 2019-11-19T09:03:45.577

$(document).ready(function(){
var lengthArr=[]
$('.week').each(function(i,e){
var cnt=$(this).find('.target-element').length;
lengthArr.push(cnt);
$(this).attr('data-length',cnt);
//alert($(this).data('length'));
});
let i = lengthArr.indexOf(Math.max(...lengthArr));
alert('max_length of  week is:'+lengthArr[i] +' at position :'+(i+1));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="week">
       <div class="day">
       </div>
       <div class="day">
       </div>
       <div class="day">
          <div class="target-element"></div>
          <div class="target-element"></div>
          <div class="target-element"></div>
       </div>
       <div class="day">
       </div>
       <div class="day">
          <div class="target-element"></div>
          <div class="target-element"></div>
       </div>
       <div class="day">
       </div>
       <div class="day">
          <div class="target-element"></div>
       </div>
    </div>
    <div class="week">
       <div class="day">
       </div>
       <div class="day">
          <div class="target-element"></div>
       </div>
       <div class="day">
       </div>
       <div class="day">
       </div>
       <div class="day">
          <div class="target-element"></div>
       </div>
       <div class="day">
       </div>
       <div class="day">
       </div>
    </div>

Awesome! This super helped me. I realized too late that I needed to actually target a `div id` in those `.day` class divs :( I'm going to update my question for clarification. — Ben Calhoun, Nov 19 '19 at 17:49

Patrick Evans · Answer 2 · 2019-11-19T09:07:56.757

Loop through the .week elements like you were, but instead of trying to build an array (unless you need the array later on) just keep track of the current max count and adjusting it each iteration. Note if you need to find descendant elements (elements within child elements) you need to use find() not children(). children() is for finding only direct child elements.

let maxWeekCount = 0;
let maxWeek = null;
$('.week').each(function(){
  let weekcount = $(this).find('.target-element').length;
  if(weekCount > maxWeekCount){
    maxWeekCount = count;
    maxWeek = $(this);
  }
});

At the end you will have the week with the most elements and the count.

Example

let maxWeekCount = 0;
let maxWeek = null;
$('.week').each(function(){
  let weekCount = $(this).find('.target-element').length;
  if(weekCount > maxWeekCount){
    maxWeekCount = weekCount;
    maxWeek = $(this);
  }
});
console.log(`Max count of ${maxWeekCount}, for week ${maxWeek.data('week')}`);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="week" data-week="1">
  <div class="day" data-day="1">
  </div>
  <div class="day" data-day="2">
  </div>
  <div class="day" data-day="3">
    <div class="target-element"></div>
    <div class="target-element"></div>
    <div class="target-element"></div>
  </div>
  <div class="day" data-day="4">
  </div>
  <div class="day" data-day="5">
    <div class="target-element"></div>
    <div class="target-element"></div>
  </div>
  <div class="day" data-day="6">
  </div>
  <div class="day" data-day="7">
    <div class="target-element"></div>
  </div>
</div>
<div class="week" data-week="2">
  <div class="day" data-day="1">
  </div>
  <div class="day" data-day="2">
    <div class="target-element"></div>
  </div>
  <div class="day" data-day="3">
  </div>
  <div class="day" data-day="4">
  </div>
  <div class="day" data-day="5">
    <div class="target-element"></div>
  </div>
  <div class="day" data-day="6">
  </div>
  <div class="day" data-day="7">
  </div>
</div>

score 0 · Answer 3 · answered Nov 19 '19 at 08:56

I found this solution to your problem. Sorry I didn't use jQuery for it!

var weeks = document.getElementsByClassName("week");
var targets = Array.from(weeks).map(function(week) {
  return week.getElementsByClassName("target-element").length;
})

// targets should be [6, 2] in your case :)

Basically you get an array containing the target elements for each week and you can get the weeks by index.

Hope this helps!

How to find max number of children elements in divs with same class name

3 Answers3