jQuery动态查找最长的高度，以将div的所有同级设置为高度

问题描述

|| 我目前正在尝试找出如何在div中动态查找最长

p

元素的高度而不设置最大高度的方法来设置div中所有同级

p

元素的高度，从此处获取代码 我想动态将高度动态设置为最长的

p

，因为我不知道最长的

p

的高度 这是代码

$(document).ready(function() {
    setHeight(\'.col\');
});



//global variable,this will store the highest height value
var maxHeight = 100;

function setHeight(col) {
    //Get all the element with class = col
    col = $(col);

    //Loop all the col
    col.each(function() {       

        //Store the highest value
        if($(this).height() > maxHeight) {
            maxHeight = $(this).height();;
        }
    });

    //Set the height
    col.height(maxHeight);
 }

如果有人知道该怎么做，那就太好了 我下面有一个原始的javascript解决方案，但它必须是jquery

function parseRightTabs() {
    var height = 20;
    var ht = 0;
    for(var i=1; i<5; i++) {
        ht = Od(\'rTest\'+i).offsetHeight;
        if(ht>height) height = ht;
        if(i>1)Od(\'rTest\'+i).style.display=\'none\';
    }
    if(height < 50) height = 112;
    Od(\'rTests\').style.height = height + \'px\';
    Od(\'rtShow2\').style.display = Od(\'rtShow3\').style.display=Od(\'rtShow4\').style.display = \'none\'; 
}

希望有人能帮忙 如果您单击右侧部分中的推荐，然后单击1、2或3，则为链接 这是js小提琴 http://jsbin.com/owiju5/2/edit     

解决方法

        试试看-

var $paragraphs = $(\'div p\');

var heights = $paragraphs.map(function() {
   return $(this).height();
});

var maxHeight = Math.max.apply(this,heights);

$paragraphs.height(maxHeight);

    ,        有一个插件可以做到这一点：列高相等 但是原则上，您的代码应执行以下操作：

$elems = $(\'.my_columns\');
var max_height = 0;
$elems.each(function(idx,elem) {
  max_height = Math.max(max_height,$(elem).height());
});
$elems.height(max_height);

    ,        有一个jQuery插件可用于设置列的高度，这将使此操作非常容易。 http://brenelz.com/blog/jquery-custom-plug-in-equal-height-columns/     ,        我认为您将不得不循环两次。一次获得最高值，然后再次将所有高度设置为该值。 所以像

...

$(\".col\").each(function() {       

        //Store the highest value
        if($(this).height() > maxHeight) {
            maxHeight = $(this).height();;
        }
    });

$(\".col\").each(function() {       
        $(this).height(maxHeight);
    });

...

    ,        这是简单的代码

var heights = $(\"element\").map(function ()
{
return $(this).height();
}).get(),MaxHeight = Math.max.apply(null,heights);

要么

var highest = null;
 var hi = 0;
$(\".testdiv\").each(function(){
var h = $(this).height();
 if(h > hi){
 hi = h;
 highest = $(this);  
 }    
});

highest.css(\"background-color\",\"red\");

    ,        您可以扩展jQuery以具有

matchHeight()

方法。请注意以下步骤： 我们必须在

$(window).load()

完成后才调用此函数，否则最大高度读数将是错误的。 然后，“ѭ13”会导致我们的列元素将其高度对齐到其内容，但只有在设置了它们的宽度后才可以使用，并且通常将大多数浮动列的宽度都设置为一种良好的做法。这很重要，否则在某些情况下，您的

$(this).height()

读数将为

0

。 然后，当我们最终到达最后一列时，我们使用

Math.max.apply()

技巧找到最大的列高。但是，只有当我们有选择器时，该技巧才有效，并且

o

变量将转到单个列元素，而不是所有列元素。因此，我们利用

selector

属性来实现这一点。 然后，再次，我们必须使用

selector

属性来抓取所有同级并设置其高度。请注意，我尝试使用

o.siblings()

而不是ѭ21this进行了此操作，但此方法无效。

(function($) {
$.fn.extend({
  matchHeight: function() {
    var o = $(this);
    o.css(\'overflow\',\'hidden\');
    if (o.is(\':last-child\')) {
      var nMaxH = Math.max.apply(null,$(o.selector).map(function(){return $(this).height();}).get());
      $(o.selector).height(nMaxH);
    }
  }
});
})(jQuery);

$(window).load(function(){
  // The .row .col below is DIV P in your case,where DIV = .row and P = .col
  $(\'.row .col\').matchHeight();
});