具有来自一组元素的最大高度的元素
我有一套div元素。 在jQuery ，我希望能够find具有最大高度的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行）具有最大的高度。 我如何find这个？ 有人可以帮忙吗？
到目前为止我已经尝试过：
$("div.panel").height()它返回第一个div的高度。
使用.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);
你张贴的HTML应该使用一些实际上具有不同高度的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");
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>
如果你想在多个地方重复使用：
var maxHeight = function(elems){ return Math.max.apply(null, elems.map(function () { return $(this).height(); }).get()); }
那么你可以使用：
maxHeight($("some selector"));
尝试找出div的高度和设置div的高度 （类似于马特发布，但使用循环）
如果您有兴趣完全使用标准JavaScript进行sorting，或者不使用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]});
