获取每个父元素的最高子元素的高度

Question

因此，此问题类似于以下问题： 元素在一组元素中具有最大高度，但稍微复杂一点。 我有一个带有两个子菜单级别的导航菜单。 所以说，HTML是这个

<ul>
 <li>ParentItem1
 <div class="megamenu">
    <ul class="submenu1">
     <li>SubItem1
        <ul class="submenu2">
         <li>SubSubItem1a</li>
         <li>SubSubItem1b</li>
         <li>SubSubItem1c</li>
        </ul>
     </li>
     <li>SubItem2
        <ul class="submenu2">
         <li>SubSubItem2a</li>
         <li>SubSubItem2b</li>
         <li>SubSubItem2c</li>
         <li>SubSubItem2d</li>
        </ul>
     </li>
     <li>SubItem3
        <ul class="submenu2">
         <li>SubSubItem3a</li>
         <li>SubSubItem3b</li>
        </ul>
     </li>
    </ul>
 </div>
 </li>
 <li>ParentItem2
 <div class="megamenu">
    <ul class="submenu1">
     <li>SubItem1
        <ul class="submenu2">
         <li>SubSubItem1a</li>
         <li>SubSubItem1b</li>
        </ul>
     </li>
     <li>SubItem2
        <ul class="submenu2">
         <li>SubSubItem2a</li>
         <li>SubSubItem2b</li>
         <li>SubSubItem2c</li>
        </ul>
     </li>
     <li>SubItem3
        <ul class="submenu2">
         <li>SubSubItem3a</li>
         <li>SubSubItem3b</li>
         <li>SubSubItem3c</li>
         <li>SubSubItem3c</li>
         <li>SubSubItem3c</li>
        </ul>
     </li>
    </ul>
 </div>
 </li>
</ul>

我试图找到最高的class =“ submenu2”子项的高度，并将其作为高度应用于每个ParentItem1的div.megamenu。 因此，在此示例中，最后，ParentItem1的div.meganenu应该具有SubItem2的.submenu2的高度，而ParentItem2的div.megamenu应该具有SubItem3的.submenu2的高度。

我的jQuery是这个。

$(document).ready(function () {
    $('.megamenu').each(function() {
var highest = null;
var hi = 0;
$('.submenu2').each(function(){
  var h = $(this).height();
  if(h > hi){
     hi = h; 
     highest = $(this);  
  }    
});
//highest now contains the div with the highest so lets highlight it
$(highest).closest('.megamenu').css("height", hi);
console.log(hi)
    })

});

不幸的是，这似乎只在第一个父项（ParentItem1）中找到最高的.submenu2并将高度放在其子megamenu中。 没有为ParentItem2的.megamenu分配与ParentItem2的最高.submenu2对应的高度。

我该如何解决？ 我希望我不要以非常复杂的方式提出我的问题。 提前谢谢了！

Answer 1

1）使用jquery可以先为每个父级设置一个特定的类，然后：

maxheight1 = 0
$('.ParentItem1').find('.submenu2').each(function(){
    var thisHeight = $('this').height();
    if (thisHeight > maxheight1){
        maxheight1 = thisHeight;
        $('ParentItem1').css('height',maxheight1);
       }
});

maxheight2 = 0
$('.ParentItem2').find('.submenu2').each(function(){
    var thisHeight = $('this').height();
    if (thisHeight > maxheight2){
        maxheight2 = thisHeight;
        $('ParentItem2').css('height',maxheight2);
       }
});

2）仅使用CSS，就可以在希望具有最高子级高度的父级上设置flex：

.parentItem1{
    display:flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
}
.parentItem2{
    display:flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
}

Answer 2

再次感谢大家阅读我的文章并提出解决方案。 最后，我设法以这种方式编写脚本，并且该脚本有效。

$(document).ready(function () {
    var $hasMegamenu = $('.megamenu');
    $($hasMegamenu).each(function() {

        findMaxHeight($(this));

    });

    function findMaxHeight($hasMegamenu) {
        var $defineMaxHeight = $hasMegamenu.find($('.submenu2'));
        var highest = null;
        var hi = 0;
        $($defineMaxHeight).each(function() {
         var h = $(this).height();
         if(h > hi){
         hi = h; 
        highest = $(this);  
        } 
  $(highest).closest('.megamenu').css("height", hi);
console.log(hi);
console.log(highest);   
});
        };
});

再次感谢！！！