jQueryのトラバースの使い方 | IT工房

jQueryメソッドを使用してDOMの中を移動して要素を取得する方法をトラバースといいます。トラバースでできることの多くは子孫セレクターを活用すれば可能です。トラバースを使用するとパフォーマンスが良くなるといわれることがありますが、状況によっては必ずしもそうではないようですし、子孫セレクターを使用した場合と大差ない場合も多いようです。けれども、何かと使いやすいトラバースを覚えてjQueryの技術の幅を広げましょう。
find()のパフォーマンスについてはこちらを参照。

find()の使い方
主なトラバースをするメソッド

find()の使い方

あるセレクターで指定した要素の子孫要素のうちfind()の引数で指定した要素をすべて取得します。子孫要素を全て取得するということは、子要素だけでなく孫要素に至るまですべてが対象になります。当然ながら、親要素や兄弟要素は対象外です。そして該当する要素は複数でも取得されるということです。

find()のサンプル１

HTMLコード

<body id="wrapper">
<h1>テーブル</h1>
	<div>
		<table>
			<tr>
				<td>text</td>
				<td>text</td>
				<td>text</td>
			</tr>
			<tr>
				<td>text</td>
				<td>text</td>
				<td>text</td>
			</tr>
			<tr>
				<td>text</td>
				<td>text</td>
				<td>text</td>
			</tr>
		</table>
	</div>
	<div>
		<h2>リスト</h2>
		<ul>
			<li><p><span>text</span>list</p></li>
			<li>list</li>
			<li>list</li>
			<li>list</li>
			<li>list</li>
		</ul>
	</div>
</body>

セレクターをtableにした場合にはfind()で使用できる引数はtableタグで囲まれた範囲内の要素で指定します。
jQueryコード

$(function(){
  $("table").find("td").css("background-color","gold");
})

find()のサンプル２
セレクターをdivにした場合にはfind()で使用できる引数はdivタグで囲まれた範囲内の要素で指定します。

jQueryコード

$(function(){
  $("div").find("span").css("background-color", "gold");
})

find()のサンプル３
セレクターを#wrapperにした場合には、classで指定した範囲内の要素を指定します。

jQueryコード

$(function(){
  $("#wrapper").find("h1").css("background-color","gold");
})

主なトラバースをするメソッド

それぞれのメソッドの引数を指定すると更にその値で絞り込まれます。

メソッド	内容
.prev([selector])	直前の兄弟を選択します。サンプル
.prevAll([selector])	前にある全ての兄弟を選択します。
.next([selector])	直後の兄弟を選択します。サンプル
.nextAll([selector])	後にある全ての兄弟を選択します。
.parent([selector])	親要素を選択します。サンプル
.parents([selector])	先祖要素を選択します。サンプル
.children([selector])	全ての子供を選択します。孫は選択しません。サンプル
.find(selector)	何階層も下に引数に指定した要素を探します。必ず引数が必要です。サンプル
.siblings([selector])	選択した各要素の全ての兄弟を選択。サンプル
.closest(selector)	選択した各要素の、selectorにマッチする最も近い先祖要素を選択します。必ず引数が必要です。サンプル
.filter(selector)	選択した各要素の、selectorにマッチする要素を選択します。必ず引数が必要です。サンプル