div 要素で .each()のコードを使用し、子要素を見つけ、そのコンテンツに基づいて高さを設定します (高度な?) ページの読み込みでは正常に動作しますが、ウィンドウのサイズ変更では動作しません 助けてください
$('#col-main > div').each(function () {
var tmpHeight = 0;
$(this).find("h2").each(function() {
tmpHeight = $(this).height() > tmpHeight ? $(this).height() : tmpHeight;
});
$(this).find("h2").height(tmpHeight);
});
このコードからページの読み込み時に作業コードを追加すると、同じ高さの行内の他の div に設定した行 (".box") 内の背の高い div (列) ".demographcont" の高さ ".demographcont" を取得します。すべての行で機能しました。
ウィンドウのサイズ変更には取り組んでおらず、高さをリセットすると、コンテンツごとに高さが決まります
ウィンドウのサイズ変更時にページを更新した後
/* code for adding height to div as per content */
function setHeight() {
$('.box').each(function () {
var tmpHeight = 0;
$(this).find(".demographcont").each(function () {
tmpHeight = $(this).height() > tmpHeight ? $(this).height() : tmpHeight;
});
$(this).find(".demographcont").height(tmpHeight);
// alert(tmpHeight);
});
}
$(document).ready(function () {
setHeight();
});
$(window).resize(function () {
setHeight();
});
HTMLコードはこちら
<div class="box clearfix">
<div class="demographcont clearfix">
<div class="grid_12">
<div class="grid_5">
<label>
Date of Birth:</label>
</div>
<div class="grid_7">
18/06/2013
</div>
</div>
<div class="grid_12">
<p>
content1</p>
</div>
</div>
<div class="demographcont">
<div class="grid_12">
<p>
content1</p>
<p>
content1</p>
<p>
content1</p>
<p>
content1</p>
</div>
<div class="grid_12">
<p>
content1</p>
<p>
content1</p>
<p>
content1</p>
<p>
content1</p>
</div>
</div>
</div>
.demographcont{ border:1px solid #006599; パディング:0; 行の高さ:20px; }