【jQuery-16】要素の検索に使われるメソッド【初心者向き】

2021/12/23

PC全般

t f B! P L

今回は子要素、親要素の取得に関するメソッドを紹介します。

いずれも、指定した要素の中に包まれている要素を見つけ出します。

※エディターは編集可能になっています。変更を加えるなど、いろいろ試してみてください。

【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> を基準に番号を取得していくからです。


1981年生まれ。北海道在住。現在無職でアルバイトをしながらプログラミングを勉強中。木工を長らくしていたのでそちらの知識と技能はあります。ミニマリスト/ヴィーガン/アフリカに4年

カテゴリー別に記事を探す

このブログを検索

Contact

名前

メール *

メッセージ *

QooQ

TOP