javascript - 如何查找具有相同类名的div中子元素的最大数量

Question

所以，我有一个 html 日历，我需要循环遍历并查找一周内的元素，然后比较周以找到元素数量最多的周。我的结构看起来像这样:

    <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>

因此，目标是循环查看第一周有 6 个目标元素，第二周有 2 个目标元素。

这是我迄今为止尝试过的:

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

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

        });

我已经尝试了大约一千种变体，但没有骰子。

任何帮助将不胜感激。

编辑:我可能应该指定我的 javascript 只是尝试构建一个包含每周值的数组的开始，然后使用 Math.max.apply(Math,maxDay); 进行比较，但数组并没有像我希望的那样构建，并且似乎将整个日历的每个元素都放入数组中，或者根本什么都没有。

编辑:我意识到我实际上需要定位唯一的 div ID，而不仅仅是 .target-element。它们实际上是相同的 div，但出于我的目的，我想获取所有唯一的 div id 编号，按周循环这些编号，这样我就可以添加 grid-row-start css 位置。

我的目标是消除日历事件结构中的所有空白空间。

也太接近了吧!由于某种原因，每周循环对我来说已经成为一个巨大的心理障碍。

我能够获得所有独特的 div 来执行此操作:

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

我只想每周获得一次，这样我就可以每周循环以增量添加到网格行开始，然后在下周循环时重置。

目前，这是我整个月的工作情况:

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);
            });

        }

Answer 1

$(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>