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>

我试图找到最高等级的高度=＆＃34;子菜单2＆＃34; child并将其作为高度应用于每个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);   
});
        };
});

再次感谢!!!

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

2 个答案: