【jQuery】要素の横断メソッド(prev、next、parent、childre、sibling等)の使い方

jQueryの養素を横断するメソッド

こちらではjQueryのメソッドのうち、Traversing(横断)に関するメソッドについて解説しています。

jQueryのTraversing(横断)に関するメソッド一覧

メソッド 解説
.first() 最初の要素に対象を絞る
.last() 最後の要素に対象を絞る
.eq(index) インデックスで指定した要素に対象を絞る
.filter() セレクターや関数に一致する要素に対象を絞る
.not() セレクターや関数に一致しない要素に対象を絞る
.find(selector) セレクターにマッチする子孫要素を取得
.prev([selector]) 直前の兄弟要素を取得
.prevAll([selector]) 前の全ての兄弟要素を取得
.next([selector]) 直後の兄弟要素を取得
.nextAll([selector]) 後の全ての兄弟要素を取得
.parent([selector]) 直接の親要素を取得
.parents([selector]) 先祖要素を取得
.children([selector]) 直接の子要素を取得
.siblings([selector]) 全ての兄弟要素を取得
.closest([selector]) セレクターにマッチする最も近い先祖要素を取得
.end() メソッドチェーンの1つ前の状態に戻す
.addBack() スタック上の前の要素のセットを、現在のセットに追加

.first()

選択した要素の集合から、最初の要素に対象を絞るメソッドです。

.first()の使い方

<ul>
	<li class="red">りんご</li>
	<li class="orange">みかん</li>
	<li class="green">メロン</li>
</ul>

上記のHTMLにおいて

$('li').first().css('color', 'red');

とすると「りんご」の文字が赤色になります。

もう1つ例を挙げます。先ほどと同じHTMLに対して

$('li').css('background-color', 'yellow').first().css('color', 'red');

のようにすると、「りんご」「みかん」「メロン」の背景が黄色になり、「りんご」の文字が赤色になります。

.last()

.first()は最初の要素に対象を絞るメソッドでしたが、.last()は最後の要素に対象を絞るメソッドです。

それ以外は.first()と同じです。

.eq(index)

選択した要素の集合から、指定したインデックスの要素に対象を絞るメソッドです。

指定するインデックスは0から始まります。

インデックスをマイナスの数値にすると、最後から数えたインデックスになります。

.eq(index)の使い方

<ul>
	<li class="red">りんご</li>
	<li class="orange">みかん</li>
	<li class="green">メロン</li>
	<li class="grape">ぶどう</li>
	<li class="strawberry">いちご</li>
</ul>

上記のHTMLにおいて

$('li').eq(2).css('color', 'red');

とすると「メロン」の文字が赤色になります。

また同じHTMLにおいて

$('li').eq(-2).css('color', 'red');

とすると「ぶどう」の文字が赤色になります。

.filter()

選択した要素の集合から、セレクターや関数に一致した要素に対象を絞るメソッドです。

.filter()の引数としてセレクター、関数、DOM要素、jQueryオブジェクトを渡すことができます。

.filter(selector)の使い方

<ul>
	<li class="red">りんご</li>
	<li class="orange">みかん</li>
	<li class="green">メロン</li>
	<li class="grape">ぶどう</li>
	<li class="strawberry">いちご</li>
</ul>

上記のHTMLにおいて

$('li' ).filter(':odd').css('color', 'red');

とすると「みかん」と「ぶどう」の文字が赤色になります。

.filter(function)の使い方

引数に関数を渡した場合の使い方を紹介します。

選択した各要素について、関数がtrueを返す場合にその要素は含まれ、falseの場合は除外されます。

<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
	<li>6</li>
</ul>

上記のHTMLにおいて

$("li").filter(function(index) {
	return index % 3 === 2;
}).css('color', 'red');

とすると「3」と「6」(2番目と5番目の<li>)の文字が赤色になります。

.not()

選択した要素の集合から、セレクターや関数に一致しない要素に対象を絞るメソッドです。

.filter()と逆の働きをします。

.notの引数としてセレクター、関数、jQueryオブジェクトを渡すことができます。

.not()の使い方

<ul>
	<li class="red">りんご</li>
	<li class="orange">みかん</li>
	<li class="green">メロン</li>
</ul>

上記のHTMLにおいて

$('li' ).not(':first').css('color', 'red');

とすると「みかん」と「メロン」の文字が赤色になります。

.find(selector)

選択した要素の子孫要素から、セレクターにマッチする子孫要素を取得するメソッドです。

.find()の引数としてセレクター、DOM要素、jQueryオブジェクトを渡すことができます。

.find()の使い方

<ul>
	<li class="red">りんご</li>
	<li class="orange">みかん</li>
	<li class="green">メロン</li>
	<li class="grape">ぶどう</li>
	<li class="strawberry">いちご</li>
</ul>

上記のHTMLにおいて

$('ul').find('.red').css('color', 'red');

とすると「りんご」の文字が赤色になります。

$('ul')により<ul>が選択され、find()でその子孫要素にフィルターをかけ、クラスがredの要素に絞り込んでいます。

.prev([selector])

選択している要素の直前の兄弟要素を取得します。

.prev([selector])の使い方

<ul>
	<li class="red">りんご</li>
	<li class="orange">みかん</li>
	<li class="green">メロン</li>
	<li class="grape">ぶどう</li>
	<li class="strawberry">いちご</li>
</ul>

上記のHTMLにおいて

$('li.green').prev().css('color', 'red');

とすると「みかん」という文字列が赤色になります。

.prevAll([selector])

選択している要素の前にある全ての兄弟要素を取得します。

.prevAll([selector])の使い方

<ul>
	<li class="red">りんご</li>
	<li class="orange">みかん</li>
	<li class="green">メロン</li>
	<li class="grape">ぶどう</li>
	<li class="strawberry">いちご</li>
</ul>

上記のHTMLにおいて

$('li.green').prevAll().css('color', 'red');

とすると「りんご」と「みかん」という文字列が赤色になります。

.next([selector])

選択している要素の直後の兄弟要素を取得します。

.next([selector])の使い方

<ul>
	<li class="red">りんご</li>
	<li class="orange">みかん</li>
	<li class="green">メロン</li>
	<li class="grape">ぶどう</li>
	<li class="strawberry">いちご</li>
</ul>

上記のHTMLにおいて

$('li.green').next().css('color', 'red');

とすると「ぶどう」という文字列が赤色になります。

.nextAll([selector])

選択している要素の後ろにある全ての兄弟要素を取得します。

.nextAll([selector])の使い方

<ul>
	<li class="red">りんご</li>
	<li class="orange">みかん</li>
	<li class="green">メロン</li>
	<li class="grape">ぶどう</li>
	<li class="strawberry">いちご</li>
</ul>

上記のHTMLにおいて

$('li.green').nextAll().css('color', 'red');

とすると「ぶどう」と「いちご」の文字列が赤色になります。

.parent([selector])

選択している要素の直接の親要素を取得します。

.parent([selector])の使い方

<ul>
	<li id="item1">1</li>
	<li id="item2">2</li>
	<li id="item3">3</li>
	<ul>
		<li id="item4">4</li>
		<li id="item5">5</li>
		<li id="item6">6</li>
		<ul>
			<li id="item7">7</li>
			<li id="item8">8</li>
			<li id="item9">9</li>
		</ul>
	</ul>
</ul>

上記のHTMLにおいて

$('#item4').parent().css('color', 'red');

とすると「4」「5」「6」「7」「8」「9」の文字が赤色になります。

.parents([selector])

選択している要素の全ての先祖要素を取得します。

.parents([selector])の使い方

<ul>
	<li id="item1">1</li>
	<li id="item2">2</li>
	<li id="item3">3</li>
	<ul>
		<li id="item4">4</li>
		<li id="item5">5</li>
		<li id="item6">6</li>
		<ul>
			<li id="item7">7</li>
			<li id="item8">8</li>
			<li id="item9">9</li>
		</ul>
	</ul>
</ul>

上記のHTMLにおいて

$('#item4').parents().css('color', 'red');

とすると「1」「2」「3」「4」「5」「6」「7」「8」「9」の文字が赤色になります。

.children([selector])

選択した要素の直接の子要素(1階層下の要素)を取得します。

.children([selector])の使い方

<ul id="level1">
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<ul id="level2">
		<li>4</li>
		<li>5</li>
		<li>6</li>
		<ul id="level3">
			<li>7</li>
			<li>8</li>
			<li>9</li>
		</ul>
	</ul>
</ul>

上記のHTMLにおいて

$('#level2').children().css('color', 'red');

とすると「4」「5」「6」「7」「8」「9」の文字が赤色になります。

.siblings([selector])

選択した要素の全ての兄弟要素を取得します。

.siblings([selector])の使い方

<ul>
	<li id="item1">1</li>
	<li id="item2">2</li>
	<li id="item3">3</li>
	<ul>
		<li id="item4">4</li>
		<li id="item5">5</li>
		<li id="item6">6</li>
		<ul>
			<li id="item7">7</li>
			<li id="item8">8</li>
			<li id="item9">9</li>
		</ul>
	</ul>
</ul>

上記のHTMLにおいて

$('#item5').siblings().css('color', 'red');

とすると「4」「6」「7」「8」「9」の文字が赤色になります。

.closest([selector])

選択した要素の先祖要素から、セレクターにマッチする最も近い先祖要素を取得します。

.closest()の引数としてセレクター、jQueryオブジェクトを渡すことができます。

.closest([selector])の使い方

<ul>
	<li id="item1">1</li>
	<li id="item2">2</li>
	<li id="item3">3</li>
	<ul>
		<li id="item4">4</li>
		<li id="item5">5</li>
		<li id="item6">6</li>
		<ul>
			<li id="item7">7</li>
			<li id="item8">8</li>
			<li id="item9">9</li>
		</ul>
	</ul>
</ul>

上記のHTMLにおいて

$('#item4').closest('ul').css('color', 'red');

とすると「4」「5」「6」「7」「8」「9」の文字が赤色になります。

.end()

スタック上の1つ前の状態(メソッドチェーンの1つ前の状態)に戻ります。

.end()の使い方

<ul>
	<li id="item1">1</li>
	<li id="item2">2</li>
	<li id="item3">3</li>
	<ul>
		<li id="item4">4</li>
		<li id="item5">5</li>
		<li id="item6">6</li>
		<ul>
			<li id="item7">7</li>
			<li id="item8">8</li>
			<li id="item9">9</li>
		</ul>
	</ul>
</ul>

上記のHTMLにおいて

$('#item6').prev().css('color', 'red')
	.prev().css('color', 'green')
	.end().css('font-weight', 'bold');

とすると「4」の文字が赤色になり、「5」の文字が緑色の太字になります。

どのような動作をしているのか少し解説します。

まず$('#item6').prev().css('color', 'red')で「5」の文字を赤色にします。

それから.prev().css('color', 'green')で「4」の文字を緑色にします。

そして.end()で1つ前の状態、つまり<li id="item5">5</li>を選択している状態に戻り、.css('font-weight', 'bold')で「5」の文字が太字になります。

.addBack()

スタック上の前の要素のセットを、現在のセットに追加します。

.addBack()の使い方

<ul>
	<li id="item1">1</li>
	<li id="item2">2</li>
	<li id="item3">3</li>
	<ul>
		<li id="item4">4</li>
		<li id="item5">5</li>
		<li id="item6">6</li>
		<ul>
			<li id="item7">7</li>
			<li id="item8">8</li>
			<li id="item9">9</li>
		</ul>
	</ul>
</ul>

上記のHTMLにおいて

$('#item6').prev().css('color', 'red')
	.prev().css('color', 'green')
	.addBack().css('font-weight', 'bold');

とすると「4」の文字が赤色の太字になり、「5」の文字が緑色の太字になります。

どのような動作をしているのか解説します。

まず$('#item6').prev().css('color', 'red')で「5」の文字を赤色にします。

それから.prev().css('color', 'green')で「4」の文字を緑色にします。この時点で<li id="item4">4</li>が選択されています。

そして.addBack()でスタック上の前の要素のセット(<li id="item5">5</li>)を現在選択しているセットに加えます。

これにより<li id="item4">4</li><li id="item5">5</li>が選択された状態にななります。

そして.css('font-weight', 'bold');で「4」と「5」の文字を太字にしています。

[prism]