jquery.matchHeight.jsが効かない場合の対処法を紹介!

jquery.matchHeight.jsが効かない場合の対処法を紹介します。jquery.matchHeight.jsが効かない原因としてはいくつか考えられます。その対処法についてそれぞれ解説します。

コンテンツ [表示]

  1. 1jquery.matchHeight.jsが効かない
  2. 2jquery.matchHeight.jsが効かない場合の対処法
  3. 2.1jQueryのCDNよりも前にmatchHeightを読み込んでいる
  4. 2.2複数のスクリプトを読み込んでいる場合
  5. 2.3jquery.matchHeight.jsで非表示の要素は除外されない
  6. 3まとめ

jquery.matchHeight.jsが効かない

matchHeightが効かない原因としてはいくつか考えられます。

その原因と対処法について以降の項目にてそれぞれ解説します。

Photo byFree-Photos

jquery.matchHeight.jsが効かない場合の対処法

ではmatchHeightが効かない場合の原因と対処法についてそれぞれ見ていきましょう。

jQueryのCDNよりも前にmatchHeightを読み込んでいる

HTMLにて以下のような順番でCDNを読み込んでいるとmatchHeightが効かなくて、高さを揃えることができません。

matchHeightが効かない場合

<!-- matchHeight.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.matchHeight/0.7.2/jquery.matchHeight-min.js"></script>
<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

対処法

以下の順番でCDNを読み込むことで、matchHeightを効かせることができます。

matchHeightの正しいCDNの読み込ませ方

<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- matchHeight.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.matchHeight/0.7.2/jquery.matchHeight-min.js"></script>

複数のスクリプトを読み込んでいる場合

複数のプラグインなどをスクリプトで読み込んでしまっている場合、matchHeightが効かない時があります。

このような場合は検証ツールにてエラーを確認しつつ、エラーの原因となっている他のプラグインを使用することを諦めるか、プラグインを読み込む順番を変えてみるなどしてみましょう。

jquery.matchHeight.jsで非表示の要素は除外されない

こちらはmatchHeightが効いているが、意図した挙動になっていないという場合の原因として考えられます。

matchHeightはdisplay: none;visibility: hidden;の要素もサポートしているため、もし1つめの要素をCSSにて非表示にしていても1つ目の要素の高さに揃えられてしまいます。

サンプルコードにて確認してみましょう。

このように1つ目のli要素を非表示にしているのに、2つ目のli要素ではなく、1つ目のli要素で高さが揃えられていることが分かります。

対処法

対処法としては要素指定の箇所に+ :visibleを追記してください。

こうすることで表示されていない1つ目のli要素は無視され、2つ目のli要素で高さが揃えられます。

ではサンプルコードで確認してみましょう。

上記のように表示されている2つ目のli要素で高さが揃えられていることが分かります。

まとめ

いかがでしたでしょうか?

ここで紹介したmatchHeightが効かない原因に注意して、便利なプラグインであるmatchHeightを使ってみてください。

GeekHive採用サイト

関連記事