今回の記事では、jQueryを使用した親要素・子要素の取得の方法について学んでいきます。
Webサイトのアニメーションを制作するにあたり、DOMの要素を取得する知識は必要不可欠です。
目次
jQueryで要素を取得する
jQueryを使用して要素を取得するにあたり、以下の２つの方法を覚えておきましょう。
・親要素を取得する
・子要素を取得する
これから、上記２つの方法で要素を取得する方法をご紹介します。
親要素を取得する３つのメソッド
まずは、親要素を取得するメソッドを確認していきましょう。
・parent()
・parents()
・closest()
親要素を取得するためのメソッドは上記の３つがあります。
いくつか例題を出しますので、実際にコードを書きながら把握していきましょう。
parent()で親要素を取得する
親要素を取得する際に、parent()は最も有名な方法です。
parent()は、セレクタに対する親要素を取得することができるメソッドです。
（）の中に要素名を記述して、取得する要素を絞り込むこともできます。
parent()で親要素を取得する例
親要素と子要素が存在するHTMLを作成します。
これからspan.sample-childの親要素に対してクラスを追加し、オレンジ色の線を表示させます。
<div class="sample-parent">
<span class="sample-child">子要素です。</span>
</div>以下のコードのようにCSSには、追加用のクラスを作成しておきます。
子要素に対しては、違いがわかるように灰色の線をつけています。
/* 子要素のスタイル */
.sample-child {
border: 2px solid #e5e5e5;
}
/* 追加用のクラス */
.sample-parent.active {
border: 4px solid #ffbb1e;
}parent()を使用して、span.sample-childの親要素に対してクラスを追加しました。
$(".sample-child").parent().addClass("active");ここまで記述したら、以下の画像のようになっていれば大丈夫です。
今回の例のように、親要素の取得の方法を知っていると、さまざまなパターンでDOM操作が可能になります。
parents()で先祖要素を取得する
次は、parents()について学んでいきましょう。
parents()は、セレクタに対する全ての親要素を取得することができるメソッドです。
複数形のsがついているのがポイントです。
親要素のさらに親要素は、先祖要素という呼び方もするので、覚えておきましょう。
parents()で先祖要素を取得する例
親要素が複数存在するHTMLを作成します。
こちらの例では、span.sample-childの先祖要素に対してクラスを追加し、それぞれ線を表示させます。
<div class="sample-parent_1">
<div class="sample-parent_2">
<div class="sample-parent_3">
<span class="sample-child">子要素です。</span>
</div>
</div>
</div>次に以下のようにCSSを記述します。
線が見やすいように、divタグに対してpaddingをつけました。
また、span.sample-childの親要素それぞれに対して、activeクラスが追加された際に異なる色の線が追加されるようにしました。
div {
padding: 16px;
}
/* 一番外側の親要素 */
.sample-parent_1.active {
border: 4px solid red;
}
/* 真ん中の親要素 */
.sample-parent_2.active {
border: 4px solid green;
}
/* 一番内側の親要素 */
.sample-parent_3.active {
border: 4px solid blue;
}最後にparents()を使用して、span.sample-childの先祖要素にクラスを追加します。
$(".sample-child").parents().addClass("active");ここまで記述したら、ブラウザで確認してみましょう。
上記の画像のように、親要素全てに対してactiveクラスが適用されていれば線が表示されます。
（厳密にはbodyタグにもactiveクラスがついています。）
今回の例では、parents()使用して、span.sample-childの先祖要素全てに対してクラスを追加することができました。
closest()で直近の親要素を取得する
次は、closest()について確認していきましょう。
closest()は、セレクタに対して、最も直近の親要素を取得することができるメソッドです。
closestという英単語の意味からも察することができます。
このメソッドの特徴としては、parents()と同様に先祖要素を検索しつつ、条件に当てはまる要素を取得することができます。
closest()で直近の親要素を取得する例
こちらの例では、先ほどの例のHTMLを活用してclosest()を確認していきましょう。
closest()で一番直近の親要素にあたるdivタグを取得して、クラスを追加します。
$(".sample-child").closest("div").addClass("active");上記のコードを記述できたら、ブラウザで確認してみましょう。
画像のように、一番直近の親要素であるdiv.sample-parent_3に対してスタイルが追加されていれば大丈夫です。
子要素を取得するメソッド
ここまでで親要素を取得するメソッドを紹介してきました。 次は、子要素を取得するメソッドを確認していきましょう。
・children()
・find()
子要素を取得するためのメソッドは上記の２つを覚えておきましょう。
children()で子要素を取得する
まずは、children()について学んでいきましょう。
children()は、セレクタに対する子要素を取得することができるメソッドです。
children()も（）の中でさらに取得したい要素を絞り込むことができるのが特徴です。
children()で子要素を取得する例
それでは早速、例を確認していきましょう。 まずは、下記のようなHTMLを作成します。
<div class="sample-parent">
<p class="sample-child_1">子要素です。</p>
<span class="sample-child_2">子要素です。</span>
</div>
<p class="sample-child_1">知らない子です。</p>次に、クラスを追加した際の挙動を確認するスタイルを記述します。
/* pタグに対するスタイル */
.sample-child_1.active {
border: 4px solid red;
}
/* spanタグに対するスタイル */
.sample-child_2.active {
border: 4px solid blue;
}最後にjsファイルに以下のコードを記述しましょう。
div..sample-parentの子要素の、pタグに対してのみactiveクラスを追加します。
$(".sample-parent").children("p").addClass("active");ここまで記述が完了したら、ブラウザを確認します。
上記の画像のようになっていれば大丈夫です。
div..sample-parentの子要素の、pタグに対してのみスタイルが適用されていることが確認できます。
<p class="sample-child_1">知らない子です。</p>上記の要素に対しては同じpタグですが、div..sample-parentの子要素ではないのでスタイルが追加されていません。
このように、children()を使うことで条件を絞りながら子要素を取得することができるのです。
find()で全ての子孫要素から取得する
最後に、find()について学んでいきましょう。
find()は、セレクタに対する子孫要素の中からセレクタにマッチする要素を取得することができるメソッドです。
子要素のさらに子要素は子孫要素と呼ばれることもあるので、覚えておきましょう。
find()で子孫要素の中から要素を取得する例
子要素が複数存在するHTMLを作成します。
<div class="sample-parent">
<p class="sample-text">息子です！</p>
<div class="sample-child_1">
<div class="sample-child_2">
<div class="sample-child_3">
<p class="sample-text">ひ孫の孫です！</p>
</div>
</div>
</div>
</div>次にクラスが追加された際のスタイルを記述します。
.sample-text.active {
border: 4px solid red;
}最後にfind()を使用して、全ての子孫要素の中からpタグを取得しクラスを追加します。
$(".sample-parent").find("p").addClass("active");ここまで記述できたらブラウザを確認しましょう。
上記の画像のように、子孫要素の全てのpタグに対しスタイルが適用されていれば大丈夫です。
find()とchildren()の違い
ここで、find()とchildren()の違いについてもイメージを膨らませていきましょう。
先ほどのHTML,CSSのまま、children()に書き換えてみました。
$(".sample-parent").children("p").addClass("active");上記のコードに書き換えて、ブラウザを確認してみましょう。
すると、div.sample-parentの直下の階層のpタグのみスタイルが適用されました。
以上のことより、find()は小要素すべてを取得でき、children()は１階層下の要素のみ取得できるという違いも覚えておきましょう。
【注意】find()は引数を省略することはできない
前述した、children()は引数を省略して、子要素を全て取得することができますが、
find()は引数を省略して、子孫要素すべてを取得することはできません。
実際にコードを書いて１つずつ覚えていこう
ここまでで親要素と子要素を取得するメソッドを５つ紹介してきました。
その中でもfind()は非常によく使うメソッドになっております。 まずはこのメソッドだけでも覚えておきましょう。
一度に全てのメソッドを覚えるのは大変なので、１つずつ着実にメソッドを覚えていきましょう。
