jQuery 遍历 - next() メソッド

各段落の次の同胞要素を検索し、クラス名が"selected"の段落のみを選択する:

$("p");.next(".selected");.css("background", "yellow");

自分で試してみてください

定義と使用法

next()は、一致する要素集合の各要素の次の同胞要素を取得します。選択器が提供された場合、その選択器に一致する次の同胞要素を取得します。

文法

.next(selector)
パラメータ 説明
selector 要素に一致させるための選択器表現を含む文字列値。

詳細な説明

DOM要素集合を表すjQueryオブジェクトが与えられた場合、.next()メソッドはDOM木の要素の次の同胞要素を検索し、一致する要素で構成された新しいjQueryオブジェクトを返します。

このメソッドは、$()関数に渡したものと同じタイプのオプションの選択器表現を受け入れます。続く同胞要素がその選択器に一致する場合、新しいjQueryオブジェクトに残ります;そうでない場合は除外されます。

以下の簡単なリストを持つページについて考えてみてください:

<ul>
   <li>list item 1</li>
   <li>list item 2</li>
   <li class="third-item">list item 3</li>
   <li>list item 4</li>
   <li>list item 5</li>
</ul>

プロジェクト 3 から始めた場合、その後に現れる要素を見つけることができます:

$('li.third-item');.next();.css('background-color', 'red');

自分で試してみてください

この呼び出しの結果は、プロジェクト 4 が赤い背景に設定されたことです。選択器表現を適用していないため、その直後の要素は明確にオブジェクトの一部として含まれています。もし選択器を適用していたら、それを含める前に一致を確認します。