jqueryの上向きトラバーサル、下向きトラバーサル、兄弟トラバーサル、フィルタリングの使い方を詳しく解説

1. 上方向へのトラバース - 祖先要素

① $(selector).parent([filter]): セレクターに一致する要素の直接の親要素を返します。このメソッドは、返された親要素をフィルターするフィルター セレクターを受け入れることができます。

② $(selector).parents([filter]): ドキュメントのルート要素 html までの、一致する要素のすべての祖先ノードを返します。このメソッドは、返された祖先ノードをフィルタリングするフィルター セレクターを受け入れることができます。

注: 親と親の違いは、親は直接の親ノードを返し、親はすべての祖先ノードを返すのに対し、$("html").parent() は document ノードを返すことです。 ").parents( ) は空を返します。

③ $(selector).parentUntil([ancestorSelector][,filter]): 一致するノードと ancestorSelector の間のすべての祖先ノードを返します。このメソッドはフィルターするフィルター セレクターを受け入れることができないことに注意してください。返された Ancestor ノード。ancestorSelector が空であるか、ancestorSelector に一致する要素がその祖先ノードに見つからない場合、すべての祖先ノードが返されます。これはparents() メソッドと同等です。

$(selector).parentUtil(element[,ancestorSelector]): 使用法と意味は上記と同じです。

④ $(selector).offsetParent(): 一致する要素の最新の位置指定された祖先要素を返します。いわゆる位置指定された祖先要素は、主にアニメーション中に相対、絶対、固定に設定された CSS position 属性を参照します。要素のオフセットと位置を計算するのは非常に便利です。

⑤ $(selector).closest(ancestorSelector[,context]): ancestorSelector に一致する最も近い祖先要素を取得します。このメソッドは、検索範囲を制御するパラメーター コンテキストを受け入れることができます。 parents メソッドとの違いは次のとおりです。

a.closest は現在の要素自体から上向きに検索します。
parents は親ノード要素から開始します。

b.closest は、ancestorSelector に一致する要素の位置が見つかるまで DOM ツリーを上に移動します。
parents は、ドキュメントのルート要素まで DOM ツリーを上に移動し、セレクターが適用されている場合は、各祖先要素を一時コレクションに追加します。コレクションはセレクターに基づいてフィルタリングされます

c.closest は 0 または 1 つの要素を含む jQuery オブジェクトを返します
parents は 0、1 つ以上の要素を含む jQuery オブジェクトを返します

その他のバリアントの使用法:

$(selector).closest(ancestorSelectors[,context]);
$(selector).closest(jQuery object);
$(selector).closest(element)

2. 下方向にトラバースします。 elements

① .children([childrenSelector]): 要素の直接の子要素を返します。このメソッドは、返された子要素をフィルタリングするためのパラメータを受け取ることができます。

② .find(descendantSelector): 最後の子孫に至るまで、descendantSelector に一致する要素のすべての子孫要素を返します。

その他のバリアントの使用法:

.find(jQuery object);
.find(element);

③ .contents(): 要素のすべての子要素を返します。子要素との違いは、コンテンツにテキスト ノードとコメント ノードが含まれることです。

3. 兄弟トラバーサル - 兄弟要素

① .siblings([selector]): 現在の要素のすべての兄弟要素を返します。このメソッドは、返された兄弟要素をフィルターするためのオプションのパラメーターを受け取ることができます。

② .next([selector]): 現在の要素の次の兄弟要素を返します。このメソッドは、返された兄弟要素をフィルターするためのオプションのパラメーターを受け入れることができます。

③ .nextAll([selector]): 現在の要素の後のすべての兄弟要素を返します。このメソッドは、返された兄弟要素をフィルターするためのオプションのパラメーターを受け入れることができます。

④ .nextUntil([selector][,filter]): セレクター条件に一致する兄弟要素が見つかるまで、現在の要素のすべての兄弟要素を返します。このメソッドは、返された兄弟要素をフィルターするためのオプションのパラメーター フィルターを受け入れることができます。

⑤ .prev/prevAll/prevUntil は next/nextAll/nextUntil と同じ使用法と同様の機能を持ちますが、検索方向が逆です。

4. フィルター

① .filter(selector): 現在の一致要素セットからセレクター条件を満たすサブセットをフィルターし、一致範囲を減らすために使用されます。

.filter(function(index)): コールバック関数に基づいて、現在一致する要素のセットをフィルターします。コールバック関数によって渡されるパラメーターインデックスは、セット内の要素のインデックスを参照します。関数本体の要素を表すために使用されます。この関数は true または false を返します。true が返された場合、子要素は保持されます。それ以外の場合、子要素は除外されます。

その他の変換の使用法:

.filter(element|jQueryObject)

② .first(): 現在一致する要素セットの最初の要素を返します。

③ .last(): 現在一致する要素セット内の最後の要素を返します。

④ .eq(index/-index): 現在一致する要素セット内の指定された位置にある要素を返します。インデックスは 0 から始まり、負の数値は末尾から先頭への並べ替えを示します。

⑤ .has(selector/element): 現在の要素セットから、対応するサブ要素を持たない要素を除いた、特定のサブ要素を持つ要素セットを返します。子要素は、パラメータ セレクターまたは要素オブジェクトを使用して照合できます。

⑥ .is(selector|function(index)|element|jQueryObject): セレクター、コールバック関数、要素、または jQuery オブジェクトに基づいて要素コレクションを確認し、指定された expression に一致する要素が少なくとも 1 つ含まれているかどうかを返します。 true、それ以外の場合は false が返されます。また、現在の要素コレクションが空であるか、式が空の場合は false が返されます。このメソッドは通常、イベント処理ハンドラーなどのコールバック関数で、これが特定の要素であるかどうかを判断するために使用されます

⑦ .map(callback(index,domElement)): コールバック関数を通じて現在一致する要素配列を返します。それを別のオブジェクト配列に変換します (dom 要素であるかどうかに関係なく)。通常の jQueryObject 配列を変換したい場合は、jQuery.map(array,callback(objectOfArray,indexOfArray)) メソッドを使用できます。

⑧ .not(selector|elements|function(index)|jQuery object): 現在一致している要素配列からパラメータ調整を満たす要素を削除します。パラメータには、セレクタ、DOM 要素、通常の jQuery オブジェクト、および戻り値のブール変数を指定できます。コールバック関数。

⑨ .slice(start[,end]): 現在一致している要素セットから指定された範囲のサブセットを取得します。 start と end が負の数の場合、要素の末尾から先頭までの方向を取得します。

以上がjqueryの上向きトラバーサル、下向きトラバーサル、兄弟トラバーサル、フィルタリングの使い方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。