【jQuery】親要素を指定して子要素の高さを揃える

こんにちは、Ryohei（@ityryohei）です！

横並びの要素の高さを揃える場合、一番高さのある要素に値を合わせることになると思います。

flexboxを使えば簡単に高さを揃えることができるのですが……対応しなければならないブラウザの関係上、使えないときなどがあります。

そこで、今回jQueryで親要素が持つ子要素の高さを揃える方法をご紹介したいと思います！

jQueryを読み込む

jQueryを利用するために、GoogleのCDNを利用してファイルを読み込みます。

CDNというのはContents Delivery Network(コンテンツ・デリバリー・ネットワーク)の略称で、ネットワークを経由してウェブコンテンツを利用するサービスを指します。ネットワークに接続されている機器であれば利用することができます。

CDNには有料、無料のものがありますが、jQueryのライブラリファイルは無料で利用できます。

jQueryのライブラリは以下の記述で読み込むことができます。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

上記のスクリプトをheadタグ内に記述することで、jQueryを読み込むことができます。

子要素の高さを揃える

以下のデモご覧ください。

Demo

下段の要素の高さが揃っていると思います。

デモをChromeの検証やfirefoxの開発ツールで見ていただければお分かりになると思いますが、インラインに高さが設定されています。これはjQueryのheightというメソッドを使っているためです。heightは要素の高さを取得したり設定したりするメソッドですが、今回はこのheightを使って高さを設定しているため、インラインにスタイルが追加されています。

heightについては以下のページで詳しく解説していますので、よければご覧ください。

要素の高さを設定／取得する

本題に戻ります。

子要素の高さを揃える際に以下のスクリプトを実行しています。

以下のスクリプトでは「box01」のクラスが持っている子要素に対して高さを揃える処理を実行しています。各処理についてはコメントをご覧いただければと思います。簡単なものですが、デモで使用しているHTMLもご紹介しておきます。

HTML

<div id="wrap">
  <div class="box01">
    <div class="small"><p>ダミーテキスト</p></div>
    <div class="middle"><p>ダミーテキスト</p></div>
    <div class="large"><p>ダミーテキスト</p></div>
  </div>
  <div class="box02">
    <div class="small"><p>ダミーテキスト</p></div>
    <div class="middle"><p>ダミーテキスト</p></div>
    <div class="large"><p>ダミーテキスト</p></div>
  </div>
</div>

JS

$(document).ready(function(){
  //高さを保持する変数を初期化
  var h = 0;
  //セレクタの子要素の数だけ繰り返し処理
  $('.box02').children().each(function(){
    //高さが大きければ
    if ($(this).height() > h) {
      //子要素の高さを変数に代入
      h = $(this).height();
    }
  });
  //一番高さのある子要素の値を設定
  $('.box02').children().height(h);
});

プラグイン化する

子要素の高さを揃えることは上で紹介したスクリプトで可能ですが、指定する要素が増えると行数も増えていきます。

ですので、プラグイン化して利便性を高めましょう。

(function($){
  $.fn.alignHeight = function(){
    var h = 0;
    $(this).children().each(function(){
      if ($(this).height() > h) {
        h = $(this).height();
      }
    });
    $(this).children().height(h);
  };
}( jQuery ));

上記のように処理をまとめておくことで、下記のように指定するだけで子要素の高さを揃えられるようになります。

$(document).ready(function() {
  $('.box01').alignHeight();
  $('.box02').alignHeight();
  //......
});

以上、親要素を指定して子要素の高さを揃えるのご紹介でした！