js STUDIO

.nextUntil()

マッチした要素の次以降の兄弟要素で、指定したセレクターや条件に一致する要素が出てくるまで選択して取得します。

.nextUntil( [selector][, filter] ) 1.4追加

戻り値:jQuery

マッチした要素の次以降の兄弟要素で、指定したセレクターや条件に一致する要素が出てくるまで選択して取得します。

引数 説明
[selector] ここに指定したセレクタにマッチするまで、兄弟要素が選択され続けます。
[filter] 更に絞り込むためのセレクタを指定します。

.nextUntil( [element][, filter] ) 1.6追加

戻り値:jQuery

マッチした要素の次以降の兄弟要素で、指定したセレクターや条件に一致する要素が出てくるまで選択して取得します。

引数 説明
[element] ここに指定したDOM要素にマッチするまで、兄弟要素が選択され続けます。
[filter] 更に絞り込むためのセレクタを指定します。

補足事項

  • .nextUntil()自体にマッチした要素は選択する対象には含まれません。
  • もし、引数が指定されない、またはセレクタに指定した条件にどの要素もマッチしなければ、次以降の兄弟要素を全て選択します。 これは.nextAll()にフィルタリング指定をしない処理と同じ処理が行われます。
  • 第2引数にセレクタを指定すると、その条件にマッチしているかどうか検証され、フィルタリングが行われます。

デモ

term-2から次のDT要素の直前までの各兄弟要素の背景を赤くし、 term-1からterm-3の直前までのDDの兄弟要素のテキストカラーを緑にしています。 

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<dl>
  <dt id="term-1">用語 1</dt>
  <dd>定義 1-a</dd>
  <dd>定義 1-b</dd>
  <dd>定義 1-c</dd>
  <dd>定義 1-d</dd>
  <dt id="term-2">用語 2</dt>
  <dd>定義 2-a</dd>
  <dd>定義 2-b</dd>
  <dd>定義 2-c</dd>
  <dt id="term-3">用語 3</dt>
  <dd>定義 3-a</dd>
  <dd>定義 3-b</dd>
</dl>
<script>
  $("#term-2").nextUntil("dt")
    .css("background-color", "red");
  var term3 = document.getElementById("term-3");
  $("#term-1").nextUntil(term3, "dd")
    .css("color", "green");
</script>
</body>
</html>

 Back to top

© 2010 - 2017 STUDIO KINGDOM