jQuery逆引きリファレンス
親子／兄弟関係にある要素を行き来するには？（parents／parent／prev／prevAll／next／nextAll／siblings／children）
parents／parent／prev／prevAll／next／nextAll／siblings／children／endメソッドを使って、jQueryオブジェクトで保持している現在の要素セットから、ツリー構造において親子／兄弟関係にある要素を取得する方法を説明する。
カレント要素（＝jQueryオブジェクトが示す要素）を基点として、親子、もしくは兄弟関係にある要素を取得するには、以下のようなメソッドを利用します。
| メソッド | 対象の要素 |
|---|---|
| parents([exp]) | 先祖要素 |
| parent([exp]) | 親要素 |
| prev([exp]) | 前の要素（兄要素） |
| prevAll([exp]) | 全ての兄要素 |
| next([exp]) | 次の要素（弟要素） |
| nextAll([exp]) | 全ての弟要素 |
| siblings([exp]) | 全ての兄弟要素 |
| children([exp]) | 子要素（孫要素は対象外） |
表で示したメソッドを、「要素間を横断する」という意味で「トラバーシング（Traversing：横断）メソッド」と呼ぶこともあります。
具体的な例も見てみましょう。以下のサンプルは、「id="me"」である<div>要素を基点に、親子／兄弟関係にある要素を取得し、それぞれにスタイルを変更する例です。
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery TIPS</title>
<style> #family div { margin-left: 10px; } </style>
</head>
<body>
<div id="family">
お祖父さん
<div>
お父さん
<div>大きいお兄さん</div>
<div class="fav">小さいお兄さん</div>
<div id="me">
ぼく
<div>ペットのサクラ</div>
</div>
<div>弟</div>
<div class="fav">妹</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script>
$(function() {
$('#me').
css('font-weight', 'bold'). // テキストをボールド
next(). // 1
css('background-color', 'Yellow'). // 背景色を黄色に
end(). // 元の要素に戻る
nextAll().
css('color', 'Blue'). // テキスト色を青に
end().
prev(). // 3
css('background-color', 'Lime'). // 背景色をライム色に
end().
prevAll().
css('color', 'Red'). // テキスト色を赤に
end().
parent().
css('border', 'dashed 1px Green'). // 枠として緑の破線を
end().
parents().
css('text-decoration', 'underline'). // テキストに下線を
end().
siblings(). // 2
css('font-size', 'x-small'). // フォントサイズを小さく
end().
children().
css('text-decoration', 'line-through'); // テキストに打消し線を
});
</script>
</body>
</html>
|
各丸数字については、本文内で説明する。
トラバーシングメソッドを利用する際には、一点、
カレント要素（＝
jQueryオブジェクトが示す要素）が変化する
ことに注意してください。例えば、1の前ではカレント要素は「<div id="me">...</div>」ですが、1のタイミングで「<div>弟</div>」に移動します。このように、カレント要素が変化してしまった場合、元の状態に戻す役割を持つのがendメソッドです。
上のサンプルでは、メソッドチェーンとendメソッドを組み合わせることで、基点となる要素とその周辺の要素とを行き来しながら、順に目的の要素にスタイル付けしているというわけです。
引数expを利用した例
これらトラバーシング系のメソッドでは、引数としてセレクター式を渡すことで、取得すべき要素を絞り込むこともできます。例えば2のコードを、以下のように書き換えてみましょう。
|
siblings('.fav').
|
具体的には「小さいお兄さん」要素と「妹」要素のスタイルだけが変更され（＝小さい文字になっている）、「大きいお兄さん」要素と「弟」要素のスタイル設定（小さい文字にする）が行われなくなった。
同じく、3のコードを、以下のように書き換えてみます。
|
prev('.any).
|
prevメソッドは直前の要素を取得するためのメソッドなので、直前の要素が引数expに合致しない場合、要素は取得されない点に注意してください（＝そのさらに前の要素に合致する要素があったとしても取得されません）。
API：.parents()｜.parent()｜.prev()｜.prevAll()｜.next()｜.nextAll()｜.siblings()｜.children() カテゴリ：Traversing（トラバーシング） > Tree Traversal（検索／ツリー上の要素選択）
API：.end() カテゴリ：Traversing（トラバーシング） > Miscellaneous Traversing（その他のトラバーシング機能）
※以下では、本稿の前後を合わせて5回分（第69回～第73回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
70. 特定の要素を基点に別の要素を検索するには？（find）
findメソッドを使って、jQueryオブジェクトで保持している現在の要素セットの配下から、指定された条件の要素を検索する方法を説明する。
71. 【現在、表示中】≫ 親子／兄弟関係にある要素を行き来するには？（parents／parent／prev／prevAll／next／nextAll／siblings／children）
parents／parent／prev／prevAll／next／nextAll／siblings／children／endメソッドを使って、jQueryオブジェクトで保持している現在の要素セットから、ツリー構造において親子／兄弟関係にある要素を取得する方法を説明する。
72. 現在の要素から指定された祖先／兄弟要素までを取得するには？（prevUntil／nextUntil／parentsUntil）
prevUntil／nextUntil／parentsUntilメソッドを使って、jQueryオブジェクトで保持している現在の要素セットから、現在の要素の直後から、ツリー構造において（指定された）兄／弟／親の関係にある要素の直前までの範囲にある全要素を取得する方法を説明する。
73. 要素セットの内容を順に処理するには？（map）
jQueryオブジェクトで保持している要素セットを、1つずつ順番に処理し、その処理結果をjQueryオブジェクトとして取得できるmapメソッドの基本的な使い方を説明する。
