例を使用して、filter() と find() の使用法と、children() と find()_jquery の間の差異分析を説明します。

Jquery の find() メソッドと filter() メソッドは初心者にとって混同しやすいため、ここでは簡単な例を通してこれら 2 つのメソッドを比較して説明します。これら 2 つの方法の違いを理解することを目指してください。

html コード

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

テスト 1

テスト 2

まず find() メソッドを見てみましょう

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

$("div").find(".rain" ).css('color' , '#FF0000');
//以下と同等: $("div .rain").css('color','#ff0000');
//と同等: $(" .rain","div").css('color','#ff0000');

表示結果:

質問: ここで「テスト 2」が赤にならないのはなぜですか?

find() メソッドの定義: セレクター、jQuery オブジェクト、または要素によってフィルターされた、現在の要素コレクション内の各要素の子孫を取得します。

find() メソッドに関する注意事項: find() メソッドは、現在の要素コレクション内を検索します。私自身を含めてではありません。

上記の例では、$("div") に 2 つの要素が含まれています。最初の要素は要件を満たしています。ただし、第 2 要素 div 自体のクラスは「rain」ですが、その中に class=rain はありません。だから合わないんです。

filter() メソッドを使用して新機能を見てみましょう

$("div").filter(".rain").css('color', '#FF0000');

表示結果:

filter() メソッドの定義: filter() メソッドは、一致する要素セット を指定されたセレクター の要素に削減します。

これは、一致する要素のセットについて、セレクターを使用して各要素自体 (その子孫ではない) をテストすることを意味します。セレクターに一致する要素はセットに含まれ、一致しない要素は削除されます (セレクターが機能します)。フィルターとして）。新しい結果セットを形成します。

上記の例では、find() は div 要素内でクラス Rain を持つ要素 (子孫) を検索します。 Filter() は、div 内のクラスが Rain である要素をフィルターします。 1 つはそのサブセットを操作することであり、もう 1 つは独自のコレクションの要素をフィルターすることです。

filter() メソッドの 2 つの例を見てみましょう: 例 1 例 2

filter() メソッドを使用する 2 番目の形式は、セレクターの代わりに関数を使用して要素をフィルター処理することです。各要素について、関数が true を返す場合、その要素はフィルター処理されたコレクションに含まれます。それ以外の場合、その要素は除外されます。

以下の例を見てください:

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

-------- --- ---------------
ウェブページからのメッセージ
---------------------- --- --
コードはクリップボードにあります
--------------------------
OK
- ------------------------

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

$('li').filter(function(index) {
return $('strong', this ).length == 1;
}).css('background-color', 'red');

結果は次のとおりです:

ちなみに、find() メソッドと Children() メソッドの違いは次のとおりです

find() メソッドについては前述したので、ここでは詳しく説明しません。

子供たち、表面的な意味は、子供たち、子供たち、子供たちです。ここでは私は一般的に子供または息子として理解しています。なぜそのように理解できるのでしょうか？まず子供の定義を見てみましょう

children() メソッドの定義: 一致する要素セット内の各要素の のすべての子要素 ​​ を取得します。 (自分を除くと息子世代(第1階層)でのみ検索可能)

find() メソッドの定義: セレクター、jQuery オブジェクト、または要素でフィルター処理して、現在の要素コレクション内の各要素の 子孫 を取得します。

私の理解では、子は、一致するセット内の各要素の「息子」の子要素であると考えられます。 find() には、息子の世代に加えて、孫の世代も含まれます。つまり、その子孫である限り。

例を見てみましょう:

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

こんにちは< /span>

again

こんにちは

<script>$ ("div").children(".selected").css("color", "blue");</script>





結果は以下のようになります: