web-dev-qa-db-ja.com

javascript / jQueryで最も高い子要素の高さを取得する方法

Div内の最も高い要素の高さを取得する関数が必要です。

内部に他の多くの要素がある（動的に生成される）ため、$（elem）.height（）を使用してコンテナー要素の高さを要求すると、その内部の一部のコンテンツよりも高さが低くなります。内部の要素のいくつかは、この要素が持つと言うサイズよりも大きい画像です。

高さを取得できるように、最高の要素を知る必要があります。

javascriptjquerydomheight
23
Leandro Ardissone

あなたはいつでもできます：

var t=0; // the height of the highest element (after the function runs)
var t_elem;  // the highest element (after the function runs)
$("*",elem).each(function () {
    $this = $(this);
    if ( $this.outerHeight() > t ) {
        t_elem=this;
        t=$this.outerHeight();
    }
});

再び機能するように編集されました。

31
Thomas

http://css-tricks.com/snippets/jquery/equalize-heights-of-divs で、より簡単で短く見えるこのスニペットを見つけました

var maxHeight = 0;

$(yourelemselector).each(function(){
   var thisH = $(this).height();
   if (thisH > maxHeight) { maxHeight = thisH; }
});

$(yourelemselector).height(maxHeight);
41
gebeer

Div要素がその子よりも小さい場合、子はおそらく浮動しています。 divを子供と同じ大きさにすることはできますか？

可能であれば、下部に消去要素を追加して、divがその子をラップするようにします。

<div id="someParent">
    <p>test</p>
    <img src="test1.png" alt="test1" style="float: left" />
    <img src="test2.png" alt="test2" style="float: left" />
    <div style="clear: both;"></div>
</div>

または clearfix CSSソリューションを適用して、ほとんど同じことを行いますが、追加のマークアップや消去divを使用しません。

含まれているdivは、最も高い子要素と同じ高さを取得し、次の方法で取得できます。

$("#someParent").height();
6
oldwizard

私の場合、レスポンシブデザインで使用する必要があったので、ウィンドウのサイズ変更に対応させました。

function fixHeight(elem){
    var maxHeight = 0;
    $(elem).css('height','auto');
    $(elem).each(function(){
       if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
    });
    $(elem).height(maxHeight);
}

$(window).resize(function () {
    fixHeight('.myelement');
});
$(document).ready(function(e) {
    fixHeight('.myelement');
});

これが誰かを助けることを願っています！

コーディングの皆さん、ハッピー！ :)

4
Cstyves