jquery根據另一個div的高度動態調整div的大小

Question

我有一個div，最初設置爲display：none，並使用.slideDown變得可見。它通過ajax加載一個表。 由於slideDown，包含div的高度增加。我想要其他兩個div的高度同時增加。

Answer 1

如果你想要三個div的高度相同，一個CSS類添加三個div的像「同時」，經過了slideDown運行下面的代碼

var maxHeight = 0; 

$('div.simultaneously').each(function(index){ 
if ($(this).height() > maxHeight) 
{ 
maxHeight = $(this).height(); 
} 
}); 

$('div.simultaneously').height(maxHeight); 

Answer 2

$(document).ready(function(){ 
//Put your code in here, it will run when the page loads 
}); 

中選擇元素，像這樣：

$(".slideDown") 

獲取CSS屬性是這樣的：

var height = $(".slideDown").css("height"); 

設置CSS屬性是這樣的：

$("#someElement").css("background-color", "#fff"); 

如果您遇到問題，閱讀docs，我的代碼示例中可能存在錯誤，我沒有測試它們。

Answer 3

你想其他的div高度增加以匹配不斷增長的股利？或以其他方式迴應？

如果你正在尋找與之相匹配的，你的函數可能是這樣的：

function matchHeight() { 
    var newHeight = $("#grownDiv").height(); //where #grownDiv is what's growing 
    $(".matchDiv").height(newHeight); //where .matchDiv is the class of the other two 
} 

您可以將表加載後調用它。您還可以設置這樣的活動：

jQuery.event.add(window,"load",matchHeight); 
jQuery.event.add(window,"resize",matchHeight); 

等

希望這有助於。