jQuery逆引きリファレンス
現在の要素から指定された祖先／兄弟要素までを取得するには？（prevUntil／nextUntil／parentsUntil）
prevUntil／nextUntil／parentsUntilメソッドを使って、jQueryオブジェクトで保持している現在の要素セットから、現在の要素の直後から、ツリー構造において（指定された）兄／弟／親の関係にある要素の直前までの範囲にある全要素を取得する方法を説明する。
別稿「TIPS：親子／兄弟関係にある要素を行き来するには？」では、トラバーシング系のメソッドを利用して、カレント要素を基点に親子／兄弟要素を取得する方法について解説しました。本稿で解説するprevUntil／nextUntil／parentsUntilメソッドは、その特殊系メソッドです。
例えばprevUntilメソッドを見てみましょう（図1）。別稿で解説したprevメソッドは直前の要素（兄要素）を1つだけ、prevAllメソッドは兄要素を全て取得するのに対して、prevUntilメソッドは「カレント要素から指定された兄要素までを取得」します。
同じく、nextUntilメソッドであれば「カレント要素から指定された弟要素までを」、parentsUntilメソッドであれば「カレント要素から指定された祖先要素までを」、それぞれ取得します。
具体的な例も見てみましょう。以下は、「id="base"」である要素を基点に、その前後の兄弟要素を、他の<h3>要素が登場するまでの範囲で、スタイル付けする例です。
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery TIPS</title>
</head>
<body>
<div>
<h3>ポイントメイク</h3>
<p>アイシャドウ</p>
<p class="plain">口紅</p>
<h3 id="base">ベースメイク</h3>
<p>リキッドファンデーション</p>
<p>パウダーファンデーション</p>
<h3>スキンケア</h3>
<p>化粧水</p>
<p>乳液</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script>
$(function() {
$('#base').
// 現在の要素の前、<h3>要素が登場するまでの範囲を取得
prevUntil('h3'). // 1
css('background-color', 'Yellow').
end().
// 現在の要素の後、<h3>要素が登場するまでの範囲を取得
nextUntil('h3').
css('background-color', 'Lime').
end();
});
</script>
</body>
</html>
|
xxxxxUntilメソッドは、同一階層に複数種類の要素（ここでは、<h3>と<p>要素）が混在している場合に、操作の範囲を特定するのに便利なメソッドです。
ちなみに、xxxxxUntilメソッドでもprev／prevAllなどのメソッドと同じく、第2引数で対象の要素を絞り込むことが可能です。例えば1を以下のように書き換えると、範囲内の要素から「class="plain"」でない要素だけを取り出します。
|
prevUntil('h3', ':not(.plain)').
|
API：.prevUntil()｜.nextUntil()｜.parentsUntil() カテゴリ：Traversing（トラバーシング） > Tree Traversal（検索／ツリー上の要素選択）
※以下では、本稿の前後を合わせて5回分（第70回～第74回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 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メソッドの基本的な使い方を説明する。
74. 要素セットから指定の条件に合致したものを取り除くには？（not）
jQueryオブジェクトで保持している要素セットから、指定条件に合致しない要素のみを取得できるnotメソッドの基本的な使い方を説明する。
