コードは$（ドキュメント）.readyで実行されませんが、デベロッパーコンソールで表示されます

Question

$(document).ready(function(){ /*code*/ });にラップされたコードがありますが、1行を除いてすべて正常に動作します。上記のコードは正常に動作し、その下のコードはうまく動作しますが、私のコンソールには何のエラーもありません。

$('.main-right.category').height($('.footer').height() + $('.main-right.category').height()); 

これは起動しません。ただし、ページをロードした後に、開発者コンソールに正確に貼り付けてEnterキーを押すと機能します。すべての要素はページロード時に存在します（つまり、javascriptで動的に構築されているわけではありません）。 chrome、firefox、IEでも同じ結果になります。

アイデア？

編集：私のCSSがJavaScriptの前にロードされていることを追加してください。この同じjavascriptファイルの他のCSS関連の調整もうまくいきました。

また、I console.log $（ '。main-right.category'）。height（）と$（ '。footer'）。height（）は、期待していたようなゼロの整数値。

Answer 1

準備イベントが発生します。これは、すべてのアセット（css、javascript、images、...）がすべてロードされたときに発生するロードイベントとは異なります。

コードを実行すると、高さを取得しようとしている要素の高さが既に計算されているため、何も起こっていないようです。

コンソールでコードを実行すると、すべてが読み込まれ、動作が期待どおりになります。

ロードイベントにバインドするには、メソッドをチェックします。

Answer 2

私は通常と高さを設定：DOMはと協力する準備ができたときに

var height = $('.footer').height() + $('.main-right.category').height(); 
$('.main-right.category').css('height',height+'px'); 

Answer 3

$ DOM-structureが完全に利用可能なときに起動します。この時点では、レンダリングは一般的に終了していないため、要素のサイズが不明で、height（）が誤った値を返します。

$(window).load()を代わりに使用してください。

Answer 4

セレクタをデバッグして要素の高さを表示するには、consoleを使用する必要があります。

$(document).ready(function() { 

    var $footer = $('.footer'); 
    var $category = ('.main-right.category'); 

    console.log($category, $footer); 
    console.log($category.height(), $footer.height()); 
    console.log('New height =', ($category.height() + $footer.height())); 

});