手軽に利用できる！jQueryで親要素を取得する方法【初心者向け】
プログラミング初心者向けに、jQueryで親要素を取得する方法について解説しています。JavaScriptよりも手軽に利用できるので、始めたばかりという方でもすぐ身につけられるはずです。実際にソースコードを書きながら理解していきましょう。
TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。
監修してくれたメンター
山本 理仁
テックアカデミーではフロントエンドコースを担当。
jQueryで親要素を取得する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。
目次
そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。
【動画の解説はこちら】
田島メンター！要素の取得方法で、もっと複雑なものはないでしょうか？
子要素を起点にして、親要素を取得して、変更するというのがあるね。
かなり複雑そうですねー。
こういうこともjQueryなら簡単にできるんだよ。さっそく書いてみよう！
親要素を取得するメソッド
親要素を取得するメソッドはいくつか種類があります。
以下にその例を挙げましょう。
- 「.parent()」
- 「.parents()」
- 「.closest()」
代表して、上記の3種類があります。
今回は一般的な上記3種類の違いを説明していきます。
「.parent()」
直近の親要素の取得をします。
シンプルで、使いやすいと思います。
下に紹介する例ではこれを用いて簡単に紹介します。
引数にタグを指定すれば、そのタグと合致する親要素の時のみ働かせることができます。
「.parents()」
親要素だけでなく、先祖の要素までさかのぼって取得します。
引数にタグを指定すると、引数と合致する要素をすべて取得します。
「.closest()」
親要素、先祖要素の中で、引数に指定したものに一致する要素を取得します。
これは一致する親要素があるまで、先祖をさかのぼることを意味しています。
上記のようなメソッドをどのような時に使うかというと、特定の親要素があるところに何か特定のスタイルを適用したいときなどに使います。
実際に書いてみよう
実際にソースコードを書いてみましょう。
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery</title>
</head>
<body>
<div>
<p>div要素です。</p>
</div>
<p>div要素ではありません。</p>
<div>
<p>div要素です。</p>
</div>
<p>div要素ではありません。</p>
<div>
<p>div要素です。</p>
</div>
<p>div要素ではありません。</p>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="sample.js"></script>
</body>
</html>
JavaScript
$("p").parent("div").css("color", "#d9534f");
この例では、p要素の親要素をdiv要素に限って選択し、CSSのcolor(文字色)を赤(#d9534f)に変えています。
【編集者様向けメモ】フロントエンドコースの内容に沿って、<script>タグを<head>から<body>末尾へ移動しました。伴って、$(function(){})が不要ですので削除しました。
親要素の取得はjQueryで簡単に行うことができました。
以上、jQueryで親要素の取得について解説しました。
JavaScriptで行うよりも手軽に行えるので、ぜひ使えるようにしておきましょう。
pタグを囲んでいるdivタグのCSSの色を変更できました。
親要素のCSSが変わって、子要素のpタグのテキストの色がかわってるよね。
単純にid名やclass名、HTMLタグ名だけじゃなくて、こういう複雑な変更もできるんですねー。
そうそう。子要素を起点にして、親要素を変更することもできるって覚えておきたいね！
JavaScriptを学習中の方へ
これで解説は終了です、お疲れさまでした。
- つまずかず「効率的に」学びたい
- 副業や転職後の「現場で使える」知識やスキルを身につけたい
プログラミングを学習していて、このように思ったことはありませんか？
テックアカデミーのフロントエンドコースでは、第一線で活躍する「プロのエンジニア」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。
合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、JavaScript・jQueryを使ったWebサービス開発を学べます。
まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。
時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
