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

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

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

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

では以下の項目で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で特定の子要素が存在するか判定し、そこに何か処理を加えるという手法はよく用います。

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