jQueryで取得する親要素と子要素について

2015年01月07日 · jQuery

jQueryで親要素と子要素を取得することができます。

親要素・子要素とはそもそもなんのことなのか？

理解する為に、ドキュメントツリーの構造という作りを理解しておくことが必要になる

ドキュメントツリーの構造とは
HTMLドキュメントやXMLドキュメントをオブジェクトのツリー状の集合
DOMツリーとも呼ばれていたりします。

なんだかヨクワカラナイですね・・・・

ドキュメントツリー構造の簡単な説明

例えば、htmlで以下の様な書き方をします

<body>
	<div id="content">
		<ul>
			<li class="text1">テキスト１</li>
			<li class="text2">テキスト２</li>
		</ul>
	</div>
</body>

ツリー構造では
「body」要素内の「div#content」
「div#content」要素内の「ul」
「ul」要素内の「Lli.text1」と「Lli.text2」
というような形で定義をされている

・「ul」の子は「ul」要素内にある
「Lli.text1」と「Lli.text2」
が「u」lの子要素にあたる

・「ul」の親は「ul」要素を囲っている
「div#content」
が「ul」の親要素となる

取得したい要素の上下の構造を意識しておくと良いです

親要素の取得について

jQueryで親要素を取得する方法は
parent(条件)

$("ul").parent();

で「div#content」の要素が取得されます
※ツリー構造のhtmlの例で紹介しております

条件というところに要素名を入れると
指定した要素のみを取得することができます

$("ul").parent("div");

親要素が多くある場合は条件をうまく活用すると必要な要素だけを取得することも可能！

子要素の取得について

jQueryで子要素を取得する方法は
children(条件)

$("ul").children();

「Lli.text1」と「Lli.text2」の要素が配列で取得できます
※ツリー構造のhtmlの例で紹介しております
親要素と同じで、条件によって必要な要素だけを取得することもできます。

親要素と子要素の取得時の注意

今回紹介した方法で取得できる要素は直近の要素だけです。
2階層下の要素を取得するということがきません

それ以外の取得する方法としては
parents(条件)
更に親の要素を取得することができます

$("ul").parents();

find(条件)
更に子要素を取得することができます

$("ul").find();

参考サイト

jQuery親要素、子要素、兄弟要素取得のまとめ

web-wizardry

インターネット・スマホ、そしてテレビにwebの魔法をWizardry