手軽に利用できる！jQueryで親要素を取得する方法【初心者向け】
プログラミング初心者向けに、jQueryで親要素を取得する方法について解説しています。JavaScriptよりも手軽に利用できるので、始めたばかりという方でもすぐ身につけられるはずです。実際にソースコードを書きながら理解していきましょう。
TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。
JavaScriptのライブラリであるjQueryで親要素を取得する方法を説明します。
言葉で理解しようとすると難しいかもしれませんが、実際にソースコードを書きながら解説しているので、初心者の方でも覚えられるでしょう。
jQueryについてそもそもよく分からないという方は、jQueryとは何なのか解説した記事をまずご覧ください。
なお本記事は、オンラインブートキャンプ フロントエンドコース（JavaScript・jQuery講座）の内容をもとにしています。
今回の記事の内容は動画でもご覧いただけます。
テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。
目次
田島メンター！要素の取得方法で、もっと複雑なものは無いでしょうか？
子要素を起点にして、親要素を取得して、変更するというのがあるね。
かなり複雑そうですねー。
こういうこともjQueryなら簡単に出来るんだよ。さっそく書いてみよう！
親要素を取得するメソッド
親要素を取得するメソッドはいくつか種類があります。
以下にその例を上げましょう。
- 「.parent()」
- 「.parents()」
- 「.closest()」
代表して、上記の3種類があります。今回は一般的な上記3種類の違いを説明していきます。
「.parent()」
直近の親要素の取得をします。シンプルで、使いやすいと思います。
下に紹介する例ではこれを用いて簡単に紹介します。引数にタグを指定すればそのタグと合致する親要素の時のみ働かせることができます。
「.parents()」
親要素だけでなく、先祖にの要素までさかのぼって取得します。
引数にタグを指定すると、引数と合致する要素をすべて取得します。
「.closest()」
親要素、先祖要素の中で、引数にしていしたものに一致する要素を取得します。
これは一致する親要素があるまで、先祖をさかのぼることを意味しています。合致するものがあるまで先祖をさかのぼります。
上記のようなメソッドをどの様な時に使うかというと、特定の親要素があるところに何か特定のスタイルを適用したいときなどに使います。
[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中
実際に書いてみよう
実際にソースコードを書いてみましょう。
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="sample.js" type="text/javascript"></script>
<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>
</body>
</html>
JavaScript
$(function(){
$("p").parent("div").css("color","#d9534f");
});
これは親要素が「div」であるときにそのものの色を赤に変えています。
親要素の取得はjQueryで簡単に行うことができました。
以上、jQueryで親要素の取得について解説しました。
JavaScriptで行うよりも手軽に行えるので、ぜひ使えるようにしておきましょう。
pタグを囲んでいるdivタグのCSSの色を変更できました。
親要素のCSSが変わって、子要素のpタグのテキストの色がわかってるよね。
単純にid名やclass名、HTMLタグ名だけじゃなくて、こういう複雑な変更も出来るんですねー。
そうそう。子要素を起点にして、親要素を変更することも出来るって覚えておきたいね！
[お知らせ]TechAcademyでは最短4週間でフロントエンドの技術が身につくフロントエンドオンラインブートキャンプを開催しています。jQueryを使ってリッチなWebサービスを作りたい方はぜひご覧ください。
