【jQuery】特定の要素の存在をチェックして条件分岐する方法

2020/08/29

こんにちは。

ゆうや（@yuyaphotograph）です！

この記事では、

という方のお悩みを解決します！

今回、紹介するサンプルコードはぼくがかつて、実際のWebサイト制作案件で使用したものを再利用しやすいように簡略化したものです。

.lengthを駆使すれば簡単に実現できます。

jQueryで躓いている方の助けになれれば幸いです！！

サンプルコード

こちら、今回のjQueryのベースとなるサンプルコードです！

sample.js

if ($('.hoge').length) {
  // hogeがあった場合の処理
} else {
  // hogeがなかった場合の処理
};

hogeというクラスがあった場合に、〜をして、なければ〇〇をする、というものです。

もちろんクラスではなく、$(‘#hoge’)というようにIDでの指定も可能です。

ここでは、ぼくが実際の案件で使用した例を紹介します。

概要はこちら。

WordPressでのWebサイト制作
カスタム投稿の記事をサブループで一覧表示
記事カードをクリックしたら、ACF to REST APIでカスタムフィールド含む記事データを取得してきて、カード親要素の直後にデータモダールでafterメソッドを使い挿入
閉じるボタンをクリックで、モーダル削除

このときに、記事カードがクリックされてモーダルが開いている状態で、別の記事カードをクリックしたときに、すでに開かれているモーダルを全て閉じてから、クリックした該当のモーダルを開きたかったわけなんです。

それを実現するために使ったのが上述した.lengthです。

.lengthでモーダル要素があるかどうかを判別して、あればremoveメソッドで全削除、という処理を行いました。

そのときのコードがこちら。

sample.js

if ($('.Modal').length) {
  $('.Modal').remove();
};

以上、jQueryで特定の要素の存在をチェックして条件分岐する方法を紹介しました。

Web制作案件をする際に必ずや！役立つスキルとなりますのでぜひ覚えていきましょう〜！

コーディングスキルアップシリーズはこちら！