【JavaScript】複数の要素を比較し、一番高い要素のheightを指定する方法

制作技術

おはようございます。

テキスト量が異なるのに、次要素の開始位置が同じであること、よくありますよね。

↑こんな感じ

そんな時に使える、超簡単なJavaScriptコード（バニラjs）がありますので是非活用してみてください。

必要知識

  • 引数の理解
  • 変数の理解
  • for文の理解
  • if文の理解

本件についてはコピペだけでOKですが、コードの内部を理解するための必須知識をざっくりピックアップ致しました。

コードの内容

下記がコードの内容となります。

function equalizeTileHeights(className) {
  const tiles = document.querySelectorAll(‘.’ + className);
  let tallestTileHeight = 0;

  // 最も高いタイルの高さを見つける
  for (let i = 0; i < tiles.length; i++) {
    const tileHeight = tiles[i].clientHeight;
    if (tallestTileHeight < tileHeight) {
      tallestTileHeight = tileHeight;
    }
  }

  // すべてのタイルに最も高いタイルの高さを適用する
  for (let i = 0; i < tiles.length; i++) {
    tiles[i].style.height = tallestTileHeight + 'px';
  }
}

// 使用例
equalizeTileHeights('tile-01');
equalizeTileHeights('tile-02');

equalizeTileHeightsを定義

引数としてclassNameを定義しておくことで、関数を呼び出す際、引数に任意のクラス名を格納することで、その該当のクラスにequalizeTileHeightsの処理が実行されることになります。

classNameに格納される該当のクラスを取得

const tiles = document.querySelectorAll('.' + className);

引数に格納されている該当のクラスが付与されている要素を全て取得し、tiles配列に格納します。

高さの初期値を設定

let tallestTileHeight = 0;

tallestTileHeightという変数を用意し、値として0を定義します。
これにより、高さの初期値が設定され、後に実寸の高さと比較する際に使用します。

該当クラスの中で一番高い要素の高さを取得

  for (let i = 0; i < tiles.length; i++) {
    const tileHeight = tiles[i].clientHeight;
    if (tallestTileHeight < tileHeight) {
      tallestTileHeight = tileHeight;
    }
  }

tiles配列に対し繰り返し処理を実行し、tileHeight変数に対してtilesのi番目（インデックス数値）の高さを格納します。

tileHeightの高さとtallestTileHeightを比較し、tallestTileHeightより大きい数字の場合はtallestTileHeightにtileHeightの値を代入し、値が更新されます。

最も高い高さの値を該当要素に付与する

  for (let i = 0; i < tiles.length; i++) {
    tiles[i].style.height = tallestTileHeight + 'px';
  }

続いて、もう一度、tiles配列に対し繰り返し処理を実行し、tilesのi番目（インデックス数値）に先ほど取得した最も高い要素の高さの値（tallestTileHeight）をCSSのheightプロパティの値として付与します。

該当クラスを引数に格納し、関数を実行する


equalizeTileHeights('tile-01');
equalizeTileHeights('tile-02');

引数に該当としたいクラス名を格納し、classNameに渡すことで、「関数の実行時に該当のクラスを引数に指定するだけ」で本件の処理が完了します。

 

おわり

いかがだったでしょうか？

tile.jsというプラグインを過去に見た記憶があり、同じようなものを簡単に作れるのでは？

と思い作成させて頂きました。

本記事が誰かのお役に立てれば幸いです🙇‍♂️

コメント