DOM ツリーを走査する jQuery におけるparents()、parent()、closest()の違いupward_jquery

このスプリントでは、フロントエンド UI を記述する必要があるため、jQuery が使用されますが、DOM ツリーを上方に移動するための jQuery の API には、parents()、parent()、および Closest() が含まれています。それらの間には明確な違いがあるため、jQuery API ドキュメントを注意深く読み、参照用に違いをここに記録しました。

1.parents([セレクター])

このメソッドは、指定された jQuery オブジェクトに含まれる DOM 要素または DOM 要素セットの祖先ノードを選択し、これらのノードを jQuery オブジェクトにパッケージ化して返します。返されたノード セットは、内側から外側にソートされます。 。

同時に、このメソッドは文字列セレクターも受け入れます。これは、返されたノード セットからセレクターに一致する子要素のセットをフィルターするために使用されます。

2.parent([セレクター])

このメソッドは、指定された jQuery オブジェクトに含まれる DOM 要素または DOM 要素セットの親ノードを選択するために使用されます。 parents() との違いは、parents() は DOM ツリー全体を検索するのに対し、parents() は 1 つ上のレベルのみを検索することです。

このメソッドは、返された要素をフィルターする文字列セレクターを受け入れることもできます。

DOM 要素の親要素は 1 つだけではないのですか?なぜフィルタリングにセレクターが必要なのでしょうか?と疑問に思う人もいるかもしれません。実際、jQuery オブジェクトには多くの DOM 要素が含まれる場合があります。たとえば、$('a').parent() はすべての タグの親要素を選択するため、フィルタリングできます。

3.最も近い(セレクター)

このメソッドは、セレクターに一致するノードが見つかるまで、jQuery オブジェクトに含まれる DOM 要素または DOM 要素セットの祖先ノードを上方向にトラバースするために使用されます。

親()との違い:

closest() は、それ自体から開始され、適切なノードが見つかるまで上方向に移動します。返される jQuery オブジェクトには、

が含まれます。

parents() は、独自の親ノードから開始して上に移動し、すべての祖先ノードを返し、セレクターに従ってこれらのノードをフィルター処理します。最終的に返される jQuery オブジェクトには、0、1、またはそれ以上のオブジェクトが含まれる場合があります。

違いを示す例:

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

🎜>

上記のドキュメント内:

$('b').parents() は、span、p、div、body、html およびその他の要素から構成される jQuery オブジェクトを返します。
$('b').parent() は次を返します:

によって構築された jQuery オブジェクト

$('b').closest('div') は次を返します: div から構築された jQuery オブジェクト。