元素與一組元素的最大高度

Question

我有一組div元素。在jQuery中，我希望能夠找出div的最大高度以及div的高度。例如：

<div> 
    <div class="panel"> 
     Line 1 
     Line 2 
    </div> 
    <div class="panel"> 
     Line 1<br/> 
     Line 2<br/> 
     Line 3<br/> 
     Line 4<br/> 
    </div> 
    <div class="panel"> 
     Line 1 
    </div> 
    <div class="panel"> 
     Line 1 
     Line 2 
    </div> 
</div> 

通過看上面的，我們知道第二div（與4線）擁有所有的最大高度。我如何發現這一點？有人可以幫忙嗎？

到目前爲止，我已經試過：

$("div.panel").height()返回第一div的高度。

Answer 1

使用.map()和Math.max。

var maxHeight = Math.max.apply(null, $("div.panel").map(function() 
{ 
    return $(this).height(); 
}).get()); 

---

如果這是令人困惑的閱讀，這可能是更清楚：

var heights = $("div.panel").map(function() 
    { 
     return $(this).height(); 
    }).get(), 

    maxHeight = Math.max.apply(null, heights); 

Answer 2

嘗試Find out divs height and setting div height （到一個馬特貼相似，但是使用循環）

Answer 3

的HTML說你發佈的應該使用一些<br>實際上有不同高度的div。就像這樣：

<div> 
    <div class="panel"> 
     Line 1<br> 
     Line 2 
    </div> 
    <div class="panel"> 
     Line 1<br> 
     Line 2<br> 
     Line 3<br> 
     Line 4 
    </div> 
    <div class="panel"> 
     Line 1 
    </div> 
    <div class="panel"> 
     Line 1<br> 
     Line 2 
    </div> 
</div> 

除此之外，如果你想與最大高度參考DIV，你可以這樣做：

var highest = null; 
var hi = 0; 
$(".panel").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.css("background-color", "red"); 

Answer 4

function startListHeight($tag) { 
 
    
 
    function setHeight(s) { 
 
     var max = 0; 
 
     s.each(function() { 
 
      var h = $(this).height(); 
 
      max = Math.max(max, h); 
 
     }).height('').height(max); 
 
    } 
 
    
 
    $(window).on('ready load resize', setHeight($tag)); 
 
} 
 

 
jQuery(function($) { 
 
    $('#list-lines').each(function() { 
 
     startListHeight($('li', this)); 
 
    }); 
 
});

#list-lines { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
#list-lines li { 
 
    float: left; 
 
    display: table; 
 
    width: 33.3334%; 
 
    list-style-type: none; 
 
} 
 

 
#list-lines li img { 
 
    width: 100%; 
 
    height: auto; 
 
} 
 

 
#list-lines::after { 
 
    content: ""; 
 
    display: block; 
 
    clear: both; 
 
    overflow: hidden; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
 

 
<ul id="list-lines"> 
 
    <li> 
 
     <img src="http://img2.vetton.ru//upl/1000/346/138/vetton_ru_sddu7-2560x1600.jpg" alt="" /> 
 
     <br /> Line 1 
 
     <br /> Line 2 
 
    </li> 
 
    <li> 
 
     <img src="http://img2.vetton.ru//upl/1000/346/138/vetton_ru_mixwall66-2560x1600.jpg" alt="" /> 
 
     <br /> Line 1 
 
     <br /> Line 2 
 
     <br /> Line 3 
 
     <br /> Line 4 
 
    </li> 
 
    <li> 
 
     <img src="http://img2.vetton.ru//upl/1000/346/138/vetton_ru_sddu7-2560x1600.jpg" alt="" /> 
 
     <br /> Line 1 
 
    </li> 
 
    <li> 
 
     <img src="http://img2.vetton.ru//upl/1000/346/138/vetton_ru_mixwall66-2560x1600.jpg" alt="" /> 
 
     <br /> Line 1 
 
     <br /> Line 2 
 
    </li> 
 
</ul>

Answer 5

如果你想在多個地方重複使用：

var maxHeight = function(elems){ 
    return Math.max.apply(null, elems.map(function() 
    { 
     return $(this).height(); 
    }).get()); 
} 

然後你可以使用：

maxHeight($("some selector")); 

Answer 6

如果你有興趣完全在標準的JavaScript排序，使用或不使用的forEach（）：

var panels = document.querySelectorAll("div.panel"); 

// You'll need to slice the node_list before using .map() 
var heights = Array.prototype.slice.call(panels).map(function (panel) { 
    // return an array to hold the item and its value 
    return [panel, panel.offsetHeight]; 
}), 

// Returns a sorted array 
var sortedHeights = heights.sort(function(a, b) { return a[1] > b[1]});