今回は子要素、親要素の取得に関するメソッドを紹介します。
いずれも、指定した要素の中に包まれている要素を見つけ出します。
※エディターは編集可能になっています。変更を加えるなど、いろいろ試してみてください。
【children()】指定した要素の子要素をピックアップする
See the Pen
children() by taichi (@taichi_na)
on CodePen.
上の例では、<div> に対して children() を有効にしています。
なので <div> の中に入っている要素のみが、ボタンを押すと色が変わります。
最初の「子要素を見つける」は要素になっていないただの文字列なので、色が変わりませんでした。
次の例では、子要素の中の特定のものを選んでいます。
See the Pen
children() by taichi (@taichi_na)
on CodePen.
children() の引数に特定の要素を指定すると、親要素以下のその要素のみがピックアップされます。
ここでは、 <div> 内の <h2> を指定しているので、それのみ色が変わっているのがわかりますね。
【parent()】指定した要素の親要素をピックアップする
See the Pen
parent() by taichi (@taichi_na)
on CodePen.
今度は逆に、子要素から見た親要素をピックアップしてみます。
使用するメソッドは parent() です。
上の例では <p> の親要素をピックアップし、その親要素の背景色を変化させるスクリプトになっています。
ボタンを押すと、親要素である <div> の背景色が変わりました。
【each()】連続するそれぞれの要素に処理を行う
See the Pen
each() by taichi (@taichi_na)
on CodePen.
同じ要素すべてに対して同一の処理を実行してくれるのが、each() メソッドです。
この例では、ボタンを押すと番号が付いたリストが作成されるようになっています。
なお、(this) を使い、親のセレクタを参照していますが、こうしないと連番にならないことに注意してください。
最初の <li> を基準に番号を取得していくからです。
