画像の高さの取得

はまった

containerの中のimg要素の高さを取得してcontainerに取得した高さを適用させたい

HTML

<div class="container">
  <img src="xxx.jpg" alt="">
</div>

以下の様なjQueryを書いたけどうまくいかず、取得されたheightは0となってしまった。

jQuery

$(function(){
  var height = $('.container > img').height();
  $('.container').height(height);
});

原因：imgの中身の画像本体が読み込まれる前にimg要素自体の高さを取得してしまっている

解決方法
jQuery

$(function(){
  $('.container > img').bind('load', function() {
    height = $(this).height();
    $(this).parent().height(height);
  });
});

.bindは要素が持っているイベントに対して紐付けられるんだって。
参考URL
bind(type, [data], fn) - jQuery 日本語リファレンス
.bindで画像が読み込まれたときにimg要素の高さを取得し、それをその親要素に適用させる。

ちなみに、4行目を

$('.container').height(height);

にしたら.containerのクラス名を持つ全部の要素が同じ高さになっちゃって期待どおりにいかなかったので、thisの親要素に適用というふうにしたよ。