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

Question

因此，此问题与此类似： element with the max height from a set of elements但稍微复杂一点。 我有一个两级子菜单的导航菜单。所以我们可以说，在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> 

我试图找到最高等级=“submenu2”孩子的高度，运用它作为高度与div.megamenu每个ParentItem1。因此，最终，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

再一次感谢大家阅读我的文章并提出解决方案。我最终设法以这种方式编写我的脚本，它的工作原理。

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

再次感谢!!!

Answer 2

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，你可以设置父弯曲你想拥有的最高的高度孩子：

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