jQuery トラバーサル - nextUntil() メソッドと prevUntil() メソッドの使用の概要_jquery

WBOY
リリース: 2016-05-16 17:35:06
オリジナル
1333 人が閲覧しました

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

構文 1:

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

.nextUntil(selector,filter)

構文 2:
コードをコピー コードは次のとおりです:

.nextUntil(element,filter)

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

セレクターが一致しない場合、またはセレクターが指定されていない場合は、後続のすべての兄弟が選択され、このメソッドによって選択される要素は .nextAll() メソッドと同じになります。

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

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

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

コードをコピーします コードは次のとおりです:


用語 1

定義 1-a

定義 1-b

定義 1-c

定義 1-d

定義 2-b ;定義 2-c
用語 3

定義 3-a

定義 3-b






コードをコピー コードは次のとおりです:$("#term-2").nextUntil("dt").css ("background-color", "red");


結果は次のとおりです:

注:

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

2. パラメータ 1 に一致する要素を除外します。つまり、頭と尻尾を取り除きます。

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

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

$("#term-2").nextUntil("dts").css("background-color", "red");
ログイン後にコピー


コードをコピー コードは次のとおりです:$("#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() メソッドに似ていますが、違いは、一方が上昇し、他方が下降することです。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート