JQueryを使って要素の高さを揃える

JQueryを使って要素の高さを揃える

ペンギンくん

今回はjQueryを使って、要素の高さを揃える方法を学んでいくよ

要素の高さを揃えるには、基本的にFlexboxなどのCSSを使うのですが、先日どうしてもCSSが効かない場面がありました。

それは、Slickでカルーセルを作っていた時です。

Slickはfloatで横並びにしているので、flexみたいに自動で高さを揃えてくれないんですね。

デフォルトではテキストの量によってカードの高さが変わってしまいます。

なのでJQueryを使って高さを合わせます。

  window.addEventListener('load', function() {
    var maxHeight = 0;
    $('.card-item').each( function( index, Element ) {
      var height = $(Element).height();
      if(maxHeight < height) {
        maxHeight = height;
      }
    });
    $('.card-item').height(maxHeight);
  });

カードの高さが揃いましたね。

では簡単にコードの説明をします。

load イベントは、ページ全体が、スタイルシートや画像などのすべての含めて読み込まれたときに発生します。

maxHeight という変数を定義。

window.addEventListener('load', function() {
  var maxHeight = 0;

each( function( index, Element )はマッチした各要素に対し、関数を繰り返し実行するメソッド。

  $('.card-item').each( function( index, Element ) {

$(Element)には$('.card-item')が入るのでheightには$('.card-item')の高さを代入。

if文でmaxHeight よりheightが大きければ、maxHeight = height

  var height = $(Element).height();
  if(maxHeight < height) {
    maxHeight = height;
  }

最後に$('.card-item')の高さを変更。

$('.card-item').height(maxHeight);

以上です!
Slickでスライダーを作るときだけでなく、応用が効くので他にも使い所がありそうですね。