Get the height of the highest child-element for each parent element

Question

So this problem is similar to this one: element with the max height from a set of elements but a tiny bit more complicated. I have a navigation menu with two levels of submenus. So let's say, the html is this

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

I am trying to find the height of the highest class="submenu2" child and apply it as height to the div.megamenu for each ParentItem1. So, in the end, the div.meganenu of ParentItem1 should have the height of the .submenu2 of SubItem2 and div.megamenu of ParentItem2 should have the height of the .submenu2 of SubItem3 accordingly in this example.

My jQuery is this.

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

});

Unfortunately, this seems to find the highest .submenu2 of only the first parent item (ParentItem1) and put the height in its child megamenu. The .megamenu of ParentItem2 doesn't get assigned the corresponding height of the highest .submenu2 of ParentItem2.

How do I solve this? I hope I didn't formulate my question in a very complicated manner. Many thanks in advance!

What? Try explaining it in a list or outline, because what you said is hard to follow. — zer00ne, May 20 '17 at 11:31
The point is that this navigation list is not like that in its final form. That means that I don't know how many ParentItems will have a megamenu under them (therefore, your answer vlk, although nice, doesn't help me very much in this problem..., thanks anyway!! ). — Zisis Paparidis, May 21 '17 at 18:28
I also don't know SubSubItems will be under each SubItem of each Submenu. I am totally not aware of the final structure of this menu, therefore I need a dynamic solution which will find ALL megamenus, find for EACH megamenu the highest ul with class submenu2 (with the most SubSubItems), calculate its height and assign it dynamically as inline css to define the height of the corresponding parent megamenu. I know, it is difficult to describe it in words but I am trying guys, I am sorry :S. — Zisis Paparidis, May 21 '17 at 18:28

vlk · Answer 1 · 2017-05-20T10:07:37.920

1)With jquery You can set first a specific class to for each parent and then:

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) with just css you can set flex on the parent you want to have the height of the highest child:

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

Thanks vlk for your suggestion, however as I commended above, I don't know the final structure of this complicated menu. So I cannot play with maxheight1, maxheight2, ..... and so on, as I don't know how many megamenus there will be in the end.. That's why I am trying my luck with the each() function... — Zisis Paparidis, May 21 '17 at 18:30

score 0 · Accepted Answer · answered May 21 '17 at 18:33

Once again, thank you all for reading my post and suggesting solutions. I managed in the end to write my script in such a way and it works.

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

Thanks again!!!

Get the height of the highest child-element for each parent element

2 Answers2