jQuery traversal-nextUntil() メソッドと prevUntil() メソッドの使用の概要

この記事では、jQuery traversal-nextUntil() メソッドと prevUntil() メソッドの使用方法を紹介します。必要な友達は

nextUntil() を参照して、各要素の後続のすべての兄弟要素を取得できます。パラメータがある場合、このメソッドのパラメータに一致する要素が見つかるまで search が停止します。返される新しい jQuery オブジェクト には、以下のすべての兄弟要素が含まれますが、セレクター、DOM ノード、または渡された jQuery オブジェクトによって一致する要素は含まれません。パラメータがない場合は、後続のすべての兄弟要素が選択されます。これは .nextAll() メソッドと同じです。

構文 1:

コードは次のとおりです:

.nextUntil(selector, filter)

構文 2:

コードは次のとおりです。 (要素、 filter)

詳細
DOM 要素のコレクションを表す jQuery オブジェクトを指定すると、.nextUntil() メソッドを使用して、DOM ツリー内の要素に続く兄弟要素を検索でき、要素が一致したときに停止します。メソッドのパラメータを検索します。返される新しい jQuery オブジェクトには、後続のすべての兄弟要素が含まれますが、パラメーターに一致する要素は含まれません。
セレクターが一致しない場合、またはセレクターが指定されていない場合は、後続のすべての兄弟が選択され、このメソッドで選択される要素は .nextAll() メソッドと同じになります。

jQuery 1.6 では、セレクターの代わりに DOM ノードまたは jQuery オブジェクトを .nextUntil() メソッドに渡すことができます。

このメソッドは、オプションのセレクター

expression

を 2 番目のパラメーターとして受け入れます。このパラメーターが指定されている場合、要素はこのセレクターと一致するかどうかを検出することによってフィルター処理されます。

最初に例を見てください:

コードは次のとおりです:

<dl>
  <dt id="term-1">term 1</dt>
  <dd>definition 1-a</dd>
  <dd class="abc">definition 1-b</dd>
  <dd>definition 1-c</dd>
  <dd>definition 1-d</dd>
  <dt id="term-2">term 2</dt>
  <dd>definition 2-a</dd>
  <dd>definition 2-b</dd>
  <dd>definition 2-c</dd>
  <dt id="term-3">term 3</dt>
  <dd>definition 3-a</dd>
  <dd>definition 3-b</dd>
</dl>

コードは次のとおりです:

$("#term-2").nextUntil("dt").css("
background-color
", "red");

結果は次のとおりです:

注:

1.自分自身を含めないでください。つまり、上記の例には #term-2 自体

2 は含まれておらず、パラメーター 1 に一致する要素も含まれていません。つまり、頭と尻尾を取り除きます。

3. セレクターが一致しない場合、またはセレクターが指定されていない場合は、次のすべての同胞が選択されます。例:

$("#term-2").nextUntil("dts").css("background-color", "red");

上記のセレクターを元の dt から dts に変更すると、結果は次のようになります。

コードは次のとおりです:

$("#term-1").nextUntil("#term-3", "dd").css("color", "blue");
//或者采用DOM元素：
//var term3 = 
document
.getElementById("term-3");
//$("#term-1").nextUntil(term3, "dd").css("color", "blue");

$("#term-1").nextUntil("#term-3", ".abc").css("color", "blue");

結果は次のとおりです:

フィルタリングを提供しないセレクターの例を見てみましょう

$("#term-1").nextUntil("#term-3").css("color", "blue");

結果は以下のとおりです:

prevUntil() メソッドは nextUntil() メソッドとほぼ同じですが、唯一の違いは、一方が上がる、一方が下がるという点です。

以上がjQuery traversal-nextUntil() メソッドと prevUntil() メソッドの使用の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。