jQueryで子要素が存在するか判定する方法!

jQueryで子要素が存在するか判定する方法について解説します。jQueryで子要素が存在するか判定するにはfind()メソッドを用います。ではjQueryで子要素が存在するか判定する方法をサンプルコード付きで見ていきましょう。

コンテンツ [表示]

  1. 1jQueryで子要素が存在するか判定したい
  2. 2jQueryで子要素が存在するか判定する方法
  3. 2.1複数の属性を使った子要素が存在するか判別する方法
  4. 3まとめ

jQueryで子要素が存在するか判定したい

jQueryで子要素が存在するか判定したいというときがよくあります。

このときjQueryのfind()メソッドを用います。find()メソッドは、対象となる要素から下にある階層をたどって子要素を取得してくれます。

これにより子要素の存在の有無を確認できます。

では以下の項目でjQueryで子要素が存在するか判定する方法をサンプルコード付きで見ていきましょう。

Photo byjamesmarkosborne

jQueryで子要素が存在するか判定する方法

ではここではjQueryで子要素が存在するか判定し、その要素があれば色を青色にするということをやってみます。

ではサンプルコードを用いて挙動を見てみましょう。

このようにQumeruクラスがある子要素のみ判別して、Qumeruの文字が青色になっていることが分かります。

まず親のセレクタ(今回だとul)を取得し、find()メソッドを用いて、子要素の特定のクラスを持った要素があるかどうかを探しに行きます。

今回だとQumeruクラスをもった子要素の有無を確認したいのでfind()メソッドの引数に.Qumeruを設定します。

後はその子要素に対してCSSでスタイルを適用しています。

以上です。

複数の属性を使った子要素が存在するか判別する方法

では複数の属性を使った子要素が存在するか判別にはどうすればいいのかについて解説します。

今回はclass属性にQumeru、id属性にmagazineを持った要素のみの有無を確認して、あればQumeruの文字を青色にしたいと思います。

ではサンプルコードを用いて挙動を見てみましょう。

このようにclassにQumeru、idにmagazineを持った要素のみ取得できていることが分かります。

1つ目のサンプルコードで解説したところと違うのはfind()メソッドの引数のみです。

今回2つの属性があるので、それを&&で繋げます。今回はclass属性とid属性なので&&で繋げると".Qumeru" && "#magazine"となります。

これでclass属性にQumeru、id属性にmagazineと2つの属性を持った要素の有無を判別することができます。

まとめ

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

jQueryで特定の子要素が存在するか判定し、そこに何か処理を加えるという手法はよく用います。

ぜひここで紹介した方法を用いて試してみてください。

今だけ
無料

【5月31日まで】全カリキュラム無料で提供中!

Qumeru

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを5月31日までの期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事

【期間限定】全カリキュラム無料で提供中!

Qumeru[クメル]ではプログラミング学習の全カリキュラムを5月31日まで期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひお試し下さい!

目次