jquery - jQuery フィルターを使用する理由

Question

クラスごとに要素を取得して表示/非表示できるのに、なぜjQueryにフィルター機能があるのですか?

$('.yourClass');

Answer 1

操作したい要素があるからといって、それらが DOM にあるとは限りません。この不自然な例を考えてみましょう:

var $els = $('<div class="a"></div><div class="b"></div>');
console.log($('.a'));
console.log($els.find('.a'));
console.log($els.filter('.a'));​

デモ: http://jsfiddle.net/ambiguous/h3GMB/

最初のものは、まだDOMに$('.a')ないため、何も提供しません。2 番目のものも、子孫を検索する$elsため、何も提供しません。削減するため、3番目のものだけが探しているものを提供します:findfilter

一致した要素のセットからセレクターに一致するものへ [...]

DOM にないもののこの種の操作は、DOM 用のテンプレート チャンクを準備するときにかなり一般的です。問題の要素がDOM にある場合でも、filterとの違いはかなり重要です。find

Answer 2

ドキュメントからのように：

DOM 要素のセットを表す jQuery オブジェクトを指定すると、.filter() メソッドは、一致する要素のサブセットから新しい jQuery オブジェクトを構築します。提供されたセレクターは、各要素に対してテストされます。セレクターに一致するすべての要素が結果に含まれます。

単純なリストを含むページを考えてみましょう:

このメソッドを一連のリスト項目に適用できます。

$('li').filter(':even').css('background-color', 'red');

この呼び出しの結果、項目 1、3、および 5 はセレクターに一致するため、赤い背景になります (:even と :odd は 0 ベースのインデックスを使用することを思い出してください)。

フィルター関数は、元のクエリの結果を特定の要素にフィルター処理するために使用されます。

ただし、.hide()およびを参照して.show()いる場合は、コードを css と javascript の両方に分割する代わりに、クロス ブラウザーで複数のメソッドを使用して代わりに作業を行うことができます。

Answer 3

filter持っているセットの一部をフィルタリングできます。たとえば、アイテムのリストがあり、すべてのアイテムにクラスを追加したいが、その一部に別のクラスを追加したいとします。

$('#mylist li').addClass('someclass').filter('.someotherclass').addClass('filtered');

これを 2 つのクエリに分割することもできました。