元素与一组元素的最大高度
问题描述:
我有一组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
的高度。
答
的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");
+0
小心这个,如果你没有使用jQuery方法(例如'.height'),那么你必须解除引用它,例如:'$(this)[0] .scrollHeight;' – rogerdpack 2017-10-21 06:08:31
答
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"));
答
如果你有兴趣完全在标准的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]});
此发现的最高高度,但没有实际参考元件。 – 2011-05-19 15:36:09
你是对的;我不清楚OP是否也想要这个元素。你的答案在那种情况下起作用。 – 2011-05-19 15:42:01
马特:非常感谢。是的,我想要的只是最大高度而不是参考。 – lshettyl 2011-05-19 16:23:31