filterメソッド

filterメソッドは、セット内の要素のうち、 特定のセレクタに一致する要素だけを残します。

構文

セレクタによるフィルタリング:

javascript.filter(セレクタ);

パラメータはDOM要素やjQueryオブジェクトでも可能です:

javascript.filter(DOM要素 または jQueryオブジェクト);

関数を使用して要素をフィルタリングすることもできます。 この関数は選択された各要素に対して個別に呼び出されます。 関数がtrueを返せば、その要素は最終結果に含まれ、 falseを返せば含まれません。 関数内では、要素自体はthis変数で、 セット内でのインデックス(順序番号)はindex変数で利用できます:

javascript.filter(function(index, elem))

例

すべての段落を見つけ、prependを使って先頭にテキスト'!'を追加し、 その後、見つかった要素の中からfilterを使用してクラスwwwを持つ段落だけを取得し、 appendを使って末尾にテキスト'?'を追加しましょう:

html<p>テキスト</p>
<p>テキスト</p>
<p class="www">テキスト</p>
<p class="www">テキスト</p>
javascript$('p').prepend('!').filter('.www').append('?');

HTMLコードは次のようになります:

html<p>!テキスト</p>
<p>!テキスト</p>
<p class="www">!テキスト?</p>
<p class="www">!テキスト?</p>

例

関数を使って、strongタグを含むすべての段落を見つけ、 それらにテキスト'!!!'を設定しましょう:

html<p><strong>テキスト</strong></p>
<p><strong>テキスト</strong></p>
<p>テキスト</p>
<p>テキスト</p>
javascript$('p').filter(function() {
  return $('strong', this).length === 1;
}).html('!!!');

HTMLコードは次のようになります:

html<p>!!!</p>
<p>!!!</p>
<p>テキスト</p>
<p>テキスト</p>

関連項目

  • メソッド find,
    既に見つかった要素の中からセレクタに一致する要素を検索します
  • メソッド has,
    選択された要素のセットを子孫要素でフィルタリングします