単純なjQueryスクリプトを使用して1つのdivの高さを取得し、別のdivを同じサイズにする問題

Question

基本的には、高さをにして、高さを.l-sideにして、ウィンドウのサイズが変更され、互いの上に配置されている場合jQueryの何が問題なのかよく分かりません。

は、ここで私が得たものです：jQueryの3.1.1使用

$(window).load(function(){ $(".l-side").css({'height':($(".r-side").height()+'px')}); });

。そして私が持っている問題のhere's a jsFiddle。

私はこれを達成するためにjQuery以外の方法にも触れていますが、私の研究では列に固有の解決策しか見つけられませんでした。これらのdivは互いに直接重ね合わされる必要があります。

Answer 1

あなたはそれがプレビューウィンドウに表示されるので、私は自分の幅を変更し、しかし、あなたが見ることができるのjQueryのクラスとして.l-sideと.r-sideを参照して、マークアップでIDのようにそれらをコード化された:)

をスニペットでいます高さが一致するようになりました。

$(window).load(function() { 
 
    $("#r-side").css({ 
 
    'height': ($("#l-side").height() + 'px') 
 
    }); 
 
});

#l-side img { 
 
    width: 100px; 
 
} 
 

 
#r-side { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="l-side"><img src="http://connor.la/sandbox/refsmaster/images/forever-2.jpg"></div> 
 
<div id="r-side"></div>

Answer 2

あなたはIDではないクラスを使用してwindow.loadの代わりにdocument.ready使用してきたように、IDセレクタ '＃' を使用してください。 $(document).ready(function(){ $("#r-side").css({'height':($("#l-side").height()+'px')}); });