jQuery逆引きリファレンス
要素セットを指定の条件で絞り込むには？（filter）
filterメソッドを使って、jQueryオブジェクトで保持している現在の要素セットを、指定された条件で絞り込む方法を説明する。
現在の要素セット（jQueryオブジェクトで保持している要素群）を、さらに指定された条件で絞り込むには、filterメソッドを利用します。よく似たメソッドとしてfindメソッドがありますが、こちらは（要素セットそのものではなく）要素セットの配下から指定された要素を検索するためのメソッドです。混同しないようにしてください*1。
- *1 詳しくは、別稿「TIPS：特定の要素を基点に別の要素を検索するには？」（後日公開予定）を参照してください。
具体的な例も見てみましょう。以下は、全ての<div>要素をボールドにしたうえで、その中から「class="fav"」である要素を絞り込み、枠線を付与する例です。
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery TIPS</title>
<style> #family div { margin-left: 10px; } </style>
</head>
<body>
<div id="family">
お祖父さん
<div>
お父さん
<div>大きいお兄さん</div>
<div class="fav">小さいお兄さん</div>
<div id="me">
ぼく
<div>ペットのサクラ</div>
</div>
<div>弟</div>
<div class="fav">妹</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script>
$(function() {
$('div').
css('font-weight', 'bold'). // テキストをボールドに
filter('.fav').
css('border', 'solid 1px Red'); // 赤の枠線を付与
});
</script>
</body>
</html>
|
filterメソッドは、すでに用意されている要素セットをさらに絞り込む場合に利用する他、jQueryの拡張セレクター*2を利用する場合にも有効です。jQuery固有のセレクターは、一般的に低速です。まずは、$()関数＋標準セレクターで要素セットを取得した後、filterメソッド＋拡張セレクターでフィルタリングすることで、処理を効率化できます。
- *2
:animated、:button、:hasなどのセレクターです。詳しくは、公式サイト「jQuery Extensions」（英語）を参照してください。
コールバック関数で要素セットをフィルターする
filterメソッドの引数には、コールバック関数を指定することもできます。コールバック関数を利用することで、セレクター式では表現できない複雑な条件式も表現できるようになります。
例えば以下は、<div>要素から、配下のテキストが「ペット」で始まる要素を取り出す例です。
|
$('div').
css('font-weight', 'bold').
filter(function(index, element){
return element.textContent.trim().startsWith('ペット');
}).
css('border', 'solid 1px Red');
|
コールバック関数の条件は、以下の通りです。
- 引数として「インデックス番号」「現在の要素」を受け取ること
- フィルターにマッチする場合はtrueを返すこと
この例であれば、引数element（現在の要素）から配下のテキストを取り出し、startsWithメソッドで文字列が「ペット」で始まるかどうかを判定しています。
API：.filter() カテゴリ：Traversing（トラバーシング） > Filtering（フィルタリング）
※以下では、本稿の前後を合わせて5回分（第67回～第71回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
67. jQueryを他のライブラリと共存させるには？（jQuery.noConflict）
他のライブラリ導入により「$」や「jQuery」というオブジェクト名が衝突する問題を回避する方法を紹介。別名を定義する方法を2パターン、紹介する。
68. 異なるバージョンのjQueryを共存させるには？（jQuery.noConflict）
jQueryが持つオブジェクト名との衝突を回避するためのjQuery.noConflictメソッドを応用して、jQueryで複数のバージョンをロードする方法を説明する。
69. 【現在、表示中】≫ 要素セットを指定の条件で絞り込むには？（filter）
filterメソッドを使って、jQueryオブジェクトで保持している現在の要素セットを、指定された条件で絞り込む方法を説明する。
70. 特定の要素を基点に別の要素を検索するには？（find）
findメソッドを使って、jQueryオブジェクトで保持している現在の要素セットの配下から、指定された条件の要素を検索する方法を説明する。
71. 親子／兄弟関係にある要素を行き来するには？（parents／parent／prev／prevAll／next／nextAll／siblings／children）
parents／parent／prev／prevAll／next／nextAll／siblings／children／endメソッドを使って、jQueryオブジェクトで保持している現在の要素セットから、ツリー構造において親子／兄弟関係にある要素を取得する方法を説明する。
