matchHeight.js でつまづいたこと

なぜ matchHeight.js を使用したか

業務を進める中で、子要素の高さを揃える必要が出てきました。
CSSのFlexboxは便利なのですが、子要素まで高さを揃えることはできません。
テーブルレイアウトにすれば揃えることはできますが、
そうするとソースコードが見にくくなること、
対象のサイトがレスポンシブであることを考慮した上で、
HTMLのメンテナンス性を保つため「matchHeight.js」を使用することにしました。

問題点

例えば、以下のように横着して一括で要素を指定すると高さが揃いません。
（要素を一つずつ比較参照するのではなく、指定した全ての要素を同じ高さにしようとして、うまく動かないようです。）

$(function(){
    $('h2, p, dt, dd').matchHeight();
});

See the Pen matchHeight (fail) by Yuki T (@codetan) on CodePen.

解決策

要素を配列で指定しておきforEachで回すことによって、
一つずつmatchHeightをかけていくようにすると高さを揃えることができました。

$(function(){
    const tgtSelectors = ['h2', 'p', 'dt', 'dd'];
    tgtSelectors.forEach(function(tgtSelector){
        $(tgtSelector).matchHeight();
    });
});

See the Pen matchHeight (succeed) by Yuki T (@codetan) on CodePen.

最後に

初歩的なミスだと思いますが、備忘録の意味も込めて残しておきます。