使用jQuery / CSS找到所有元素中最高的 [英] Use jQuery/CSS to find the tallest of all elements

问题描述

可能重复：

CSS - Equal Height Columns？

我有3个div。 / p>

像这样：

 < div class =features> ;< / div> 
< div class =features>< / div> 
< div class =features>< / div> 
  

他们将被填充文本。我不知道多少。

如何使用jQuery（或CSS）找到最高的DIV，并设置其他两个

这是可能的吗？

解决方案

您不能轻易地通过高度选择或在CSS中比较，但jQuery和几个迭代应该轻松处理这个问题。我们将循环遍历每个元素并跟踪最高元素，然后我们将再次循环，并将每个元素的高度设置为最高元素的高度（工作 JSFiddle ）：

  $（document）.ready（function（）{
 var maxHeight = -1; 
 
 $（'。features'）。each（function（）{
 maxHeight = maxHeight> $（this）.height（）？maxHeight：$ ）.height（）; 
}）; 
 
 $（'。features'）。each（function（）{
 $（this）.height（maxHeight）; 
}）; 
}）; 
  
 
 
 
 $ b  b 
 Sheriffderek已经在响应网格中制作了这个解决方案的JSFiddle 。非常感谢！
 
 
 
  [Version 2] 
 
 
 
编程：
  $（document）.ready（function（）{
 //获取所有元素高度的数组
 var elementHeights = $（'。features'）。map（function（）{
 return $（this）.height（）; 
}）get（）; 
 
 // Math.max采用可变数量的参数
 //`apply`等价于将每个高度作为参数传递
 var maxHeight = Math.max.apply（null，elementHeights） ; 
 
 //将每个高度设置为最大高度
 $（'。features'）height（maxHeight）; 
}）; 
   
 
 
 
  [第3版 -  sans jQuery]  b 
 
这里是一个不使用jQuery的更新版本（工作 JSFiddle ）：
  var elements = document.getElementsByClassName（'features'）; 
 
 var elementHeights = Array.prototype.map.call（elements，function（el）{
 return el.clientHeight; 
}）; 
 
 var maxHeight = Math.max.apply（null，elementHeights）; 
 
 Array.prototype.forEach.call（elements，function（el）{
 el.style.height = maxHeight +px; 
}）; 
  
（这里是在ES6 ）
 

  
Possible Duplicate:

  CSS - Equal Height Columns?  
I have 3 divs.

Like this:
<div class="features"></div>
<div class="features"></div>
<div class="features"></div>
They are going to be filled with text. I'm not sure how much. The thing is, it's imperative that they are all equal heights.

How can i use jQuery (or CSS) to find the tallest of the DIV's and set the other two to the same height, creating 3 equal height DIV's.

Is this possible?
解决方案
You can't easily select by height or compare in CSS, but jQuery and a few iterations should easily take care of this problem.  We'll loop through each element and track the tallest element, then we'll loop again and set each element's height to be that of the tallest (working JSFiddle):
 $(document).ready(function() {
   var maxHeight = -1;

   $('.features').each(function() {
     maxHeight = maxHeight > $(this).height() ? maxHeight : $(this).height();
   });

   $('.features').each(function() {
     $(this).height(maxHeight);
   });
 });
[Addendum]

Sheriffderek has crafted a JSFiddle for this solution in a responsive grid.  Thanks!

[Version 2]

Here is a cleaner version using functional programming:
$(document).ready(function() {
  // Get an array of all element heights
  var elementHeights = $('.features').map(function() {
    return $(this).height();
  }).get();

  // Math.max takes a variable number of arguments
  // `apply` is equivalent to passing each height as an argument
  var maxHeight = Math.max.apply(null, elementHeights);

  // Set each height to the max height
  $('.features').height(maxHeight);
});
[Version 3 - sans jQuery]

Here's an updated version that doesn't use jQuery (working JSFiddle):
var elements = document.getElementsByClassName('features');

var elementHeights = Array.prototype.map.call(elements, function(el)  {
  return el.clientHeight;
});

var maxHeight = Math.max.apply(null, elementHeights);

Array.prototype.forEach.call(elements, function(el) {
  el.style.height = maxHeight + "px";
});
(and here it is in ES6)

                        
这篇关于使用jQuery / CSS找到所有元素中最高的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！