jQueryを使用したトラバース

<p></p>

find() メソッドと filter() メソッドの違い

filter() このメソッドは、ラッパー セットに含まれる現在の要素セットをフィルター処理するために使用されます。この使用は、選択した要素のセットをフィルタリングする必要があるタスクのために予約してください。たとえば、次のコードは、ラッパー セットに含まれる 3 つの <p></p> 要素をフィルターします。

リーリー

注: filter() を使用するときは、それが絶対に必要かどうかを常に自問してください。たとえば、 $('p').filter(':not(:first):not(:last)') filter()$ と記述する必要はありません。 ('p:not (:first) :not(:last)')。

一方、find() メソッドを使用すると、現在選択されている要素の子孫をさらに検索できます。 find() は、既に選択されている要素でラップされた新しい要素を使用して、現在ラップされているセットを更新または変更するようなものだと考えてください。たとえば、次のコードは find() を使用して、ラッパー セットを <p></p> 要素から 2 つの <strong></strong> 要素に変更します。

リーリー

注: 実際には、find() メソッドを現在の要素で使用する前に、andSelf() を使用してラッパー内の要素を結合できます。 - 例: $('p').find('strong').andSelf().

重要な概念は、filter() はラッパー セット内で現在選択されている要素を減らす (またはフィルターする) だけですが、find() は実際にセットを作成できるということです。真新しいパッケージ要素。

注: find() と filter() は両方とも破壊的なメソッドであり、end() を使用して元に戻すことができます。ラップされたコレクションを find() または filter() を使用する前の状態に復元します。

---

式の代わりに関数を filter() に渡します

要素を選択するためのカスタム フィルターを実行して作成する前に、関数をトラバーサル filter() メソッドに渡すだけで、ラッパー セット内の各要素をチェックできるようにする方が合理的です。要素の値シナリオ。

たとえば、HTML ページ内のすべての <img alt="jQueryを使用したトラバース" > 要素を、現在その要素でラップされていない <p></p> 要素内でラップするとします。

これを実現するカスタム フィルターを作成することも、filter() メソッドを使用して、要素の親要素が ## かどうかを判断する関数を渡すこともできます。 # 要素が存在しない場合、コレクション内の残りの <p></p> 要素を <p></p> 要素でラップする前に、コレクションからその要素を削除します。 <img alt="jQueryを使用したトラバース" > 以下の例では、HTML ページ内の各

要素を選択し、各要素を反復処理する関数 <img alt="jQueryを使用したトラバース" >filter() メソッドを渡します (## を使用) #this) ラッパー セット内で、 要素の親要素が <img alt="jQueryを使用したトラバース" > 要素であるかどうかを確認します。 リーリー <p></p>!

演算子を使用してブール値 true を false に変更していることに注意してください。これは、

要素を親として持つコレクションから <p></p> 要素を削除したいためです。 filter()<img alt="jQueryを使用したトラバース" > メソッドに渡される関数は、関数が false を返した場合、単にコレクションから要素を削除します。 重要な点は、孤立したケースを扱う場合は、カスタム フィルターを作成することです (例: :findImgWithNoP

)。フィルター メソッドに関数を渡すだけで、単一のケースをカスタマイズできます。 。この概念は非常に強力です。正規表現テストと

filter() メソッドを組み合わせたときに何が起こるかを考えてみましょう。 リーリー DOM を上方向にトラバースする

---

parent()

、

parents()、closest() メソッドを使用すると、DOM を簡単に祖先要素までトラバースできます。これらの方法の違いを理解することが重要です。以下のコードを確認して、これらの jQuery トラバーサル メソッドの違いを理解してください。 リーリー 注:

closest() と parents() は同じ機能があるように見えますが、closest() は実際には現在選択されている要素をフィルターに含めます。

<p></p>

closest()

は一致が見つかるとトラバーサルを停止しますが、

parents() はすべての親を取得してからオプションのセレクターをフィルターします。したがって、closest() は最大 1 つの要素のみを返すことができます。 トラバーサル メソッドは CSS 式をオプションのパラメーターとして受け入れます

---

CSS 式は、要素を選択するための jQuery 関数だけでなく、複数のトラバーサル メソッドにも渡すことができます。多くのトラバーサル メソッドでは、式をまったく使用する必要がないため、これを忘れがちです (例:

next()

)。次のトラバーサル メソッドでは、式はオプションですが、オプションで使用できることに注意してください。フィルタリング用の式を提供します。 <p></p>

• children('式')
• next('式')
• nextAll('式')
• 親('式')
• 親('式')
• prev('式')
• prevAll('式')
• 兄弟('式')
• closest('式')

以上がjQueryを使用したトラバースの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。