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

因此，此问题与此类似： 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的相应高度。

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

来源

2017-05-20 Zisis Paparidis

什么？尝试在清单或大纲中解释它，因为你所说的话很难遵循。 – zer00ne

关键是这个导航列表不像最终形式。这意味着我不知道有多少ParentItem会在他们下面有megamenu（因此，你的答案vlk，虽然很好，但对这个问题并没有太大的帮助，谢谢！）。 –

我也不知道SubSubItems将在每个子菜单的每个子项下。我完全不知道这个菜单的最终结构，因此我需要一个动态的解决方案，它将找到所有megamenus，为每个megamenu找出最高ul与类submenu2（具有最多SubSubItems），计算其高度并动态分配它为内联CSS来定义相应的父Megamenu的高度。我知道，很难用言语来形容它，但我正在尝试一些人，我很抱歉：S。 –

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

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

再次感谢!!!

来源

2017-05-21 18:33:35

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

来源

2017-05-20 10:00:55 vlk

感谢vlk的建议，但正如我上面所称，我不知道这个复杂菜单的最终结构。所以我不能玩maxheight1，maxheight2，.....等等，因为我不知道最终会有多少megamenus ..这就是为什么我试着用each（）函数运气的原因。。 –

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

回答

相关问题