jQuery ループ - filter() メソッド

jQuery 遍历参考手册

例

すべての div の色を変更し、クラス名が "middle" のクラスに枠線を追加します：

$("div").css("background", "#c8ebcc")
  .filter(".middle")
  .css("border-color", "red");

実際に試してみてください

定義と使用法

filter() メソッドは、マッチする要素集合を指定された選択子にマッチする要素に縮小します。

文法

.filter(selector)
パラメータ 説明
selector 文字列値、現在の要素集合にマッチする選択子表現を含む。

詳細な説明

DOM 要素集合を表す jQuery オブジェクトが与えられた場合、.filter() メソッドは、マッチする要素のサブセットを使用して新しい jQuery オブジェクトを構築します。使用される選択子は各要素をテストし、その選択子にマッチするすべての要素が結果に含まれます。

以下のシンプルなリストを持つページを考えてみてください：

<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
  <li>list item 6</li>
</ul>

このメソッドを使用してリストアイテムの集合にアプリケーションを行うことができます：

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

実際に試してみてください

この呼び出しの結果は、プロジェクト 1、3、5 の背景を赤色に設定します。これは、これらが選択子（思い出してください、:even と :odd は 0 基準の index を使用します）にマッチするためです。

フィルタリング関数の使用

このメソッドの第2形態は、選択子ではなく関数を使用して要素をフィルタリングする方法です。各要素に対して、その関数が true を返した場合、要素はフィルタリングされた集合に含まれます；そうでない場合は除外されます。

以下の少し複雑な HTML フラグメントをご覧ください：

<ul>
  <li><strong>list</strong> item 1 - one strong tag</li>
  <li><strong>list</strong> item <strong>2</strong>
   - two <span>strong tags</span></li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
  <li>list item 6</li>
</ul>

これらのリストアイテムを選択し、その内容に基づいてフィルタリングを行うことができます：

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

jQuery 遍历参考手册