1

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; }

4

1 に答える 1

1

OKこれは私があなたの質問から得たものです:

div.demographcont 要素の最大の高さを見つけて、残りの要素にこの値を設定します。ページの読み込み後、次のようなものがあります。

<div class="box clearfix">
    <div class="demographcont" style="height:304px">...</div>
    <div class="demographcont" style="height:304px">...</div>
</div>

もう一度ウィンドウのサイズ変更で同じことをしたいのですが、コメントで言ったように、インラインで同じ高さを既に設定しているため、それは不可能です。そうしないと、質問が得られません。

したがって、自動高さプロパティを追加してから、残りのプロセスを実行してみてください。

 function setHeight() {
    $('.box').each(function () {
        var tmpHeight = 0;
        $(this).find(".demographcont").each(function () {
        $(this).height('auto');
            tmpHeight = $(this).height() > tmpHeight ? $(this).height() : tmpHeight;
        });
        $(this).find(".demographcont").height(tmpHeight);
        // alert(tmpHeight);
    });
}
于 2013-07-23T21:42:37.347 に答える