獲取每個父元素的最高子元素的高度

因此，此問題與此類似： 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（）函數運氣的原因。。 –

獲取每個父元素的最高子元素的高度

回答

相關問題