jquery動態地找到最長的高度來設置高度爲div中的所有兄弟

Question

我目前正試圖找出如何設置div中所有同級元素p的高度，方法是通過動態查找該div中最長的p元素的高度無需設置的最大高度，得到了here

的代碼，我想動態設置高度爲最長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'; 
} 

希望有人能幫助

here是鏈接，如果您點擊右側部分的評價並點擊1，2或3

這裏是js小提琴

http://jsbin.com/owiju5/2/edit

Answer 1

有一個jQuery插件的設置，將使這很容易柱的高度。

http://brenelz.com/blog/jquery-custom-plug-in-equal-height-columns/

Answer 2

我認爲你將不得不兩次循環。一旦獲得最高價值，然後再將所有高度設置爲該值。

因此，像

... 

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

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

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

... 

Answer 3

嘗試了這一點 -

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

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

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

$paragraphs.height(maxHeight); 

Answer 4

有一個插件來做到這一點：Equal Column Heights

但是原則上你的代碼應該做這樣的事情：

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

Answer 5

這是簡單的代碼

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");