-4

pタグなどのブロック レベルの要素を DOM に追加しました。その寸法は自動的に計算されます (例: auto)。ただし、少なくとも最初は、jQuery でその高さを取得することはできません。しばらくすると (おそらく何らかのレイアウト処理が行われます)、高さを取得できます。

計算された高さを取得できるようにするために、要素をDOMに追加する以外に、要素を実際に測定可能にするために何が必要ですか?

具体的に言うと、それぞれに画像の URL データが添付されselectたいくつかのoption要素を持つ要素があります。タグ データを読み取り、要素を非表示にし、オプションを次のような要素を持つコンテナーに変換するイメージ ピッカー プラグインを呼び出します。optionselectdiv

<div class='container' style='width:800px'>
    <div class='convertedOptionElement' style='width:33.33%'>
        <div class='thumb' style='width:100%'>
            <img src="https://lh3.ggpht.com/hhG6g0m8Q6QqZnloQJHV9uXFdsDjpzD0vJdkbra5e_PiwOjVXuBdVR0D2L0RPmwb1zw=h900">
            <p>Image Title</p>
        </div>
    </div>
</div>

そこで、33.33% の幅 (3 列を生成) の div 要素で埋められる固定幅のコンテナーがあります。これらの div のそれぞれは、変換されたオプション要素の 1 つを表します。imgそれらのそれぞれの中に、 andpタグを含む 100% 幅の div 要素があります。

さらに、imagesLoaded プラグインと masonry プラグインを使用して画像をレイアウトしています。各画像が読み込まれた後に実行される imagesLoadedイベントでは、要素の高さと幅がゼロではないprogressことがはっきりとわかります。imgただし、そのコンテナはそうではなく、pタグもそうではありません。

発生する可能性がある唯一の特別なことは、イメージ ピッカー プラグインを使用して要素を作成した直後に、 で要素をデタッチし、各イメージがロードされると発生するfor$('.convertedOptionElement').detach()の progressイベントで、それらをコンテナに追加することです。メソッドimagesLoadedを呼び出して、レイアウトを実行します。すべてがDOMにあるにもかかわらず、計算された高さがゼロであるため、ここで問題が発生します。masonry.appended

正確な幅 (たとえば、33.33% と 100% の代わりに 250px) を指定した場合でも、ロードされた同じイベント ハンドラーで、既存の画像の寸法 (つまり、すべての親要素に明示的なサイズが指定されています)... 段落タグの高さはまだゼロです。

これが私のコードですが、これは機能しています。ただし、私が使用している正確なコンテキストでは機能していません。その理由はわかりません。http://jsfiddle.net/p7cgahro/7/

4

2 に答える 2

2

問題は、「display:none;」を持つ親要素でした。これは予期していませんでした。

ダイアログでブートストラップを呼び出した後modal('show')、実際にはすぐには何も変更されないことがわかりました。

たとえば、 への呼び出しの直後modal('show')、ダイアログにはまだ CSS クラスfade( class なしin) があり、表示スタイルはまだnoneです。しばらくすると、in基本的にfadeクラスの不透明度 0 をオーバーライドして 1 に設定するクラスが追加されます (CSS アニメーションを使用)。display:noneスタイルも削除されます。

基本的に、この問題は、親要素が と のいずれかを持っていたという事実に要約されdisplay:noneますopacity:0。特に、display:none測定を中断させたのは値でした。

興味深いことに、この問題は、コードを 1 行も書かずに、私の質問の元のバージョンで直接答えられた可能性があります。 、計算された高さを取得できるようにするには?"

答えは... どの親要素も「display:none」を持つことはできません。

于 2015-11-30T21:41:51.683 に答える
1

あなたのコードを考えると：

$(document).append('<p>Hello</p>');
console.log($(document).find('p').height()); //zero, why?

無効なに HTML を追加しようとしてdocumentいます。body代わりに次の要素を使用してください。

$('body').append('<p>Hello</p>');
console.log($('body').find('p').height());

実施例

于 2015-11-30T16:49:19.887 に答える