こんにちは！フリーランスの桃太郎です。
jQueryにて要素の絞り込みを行うためのメソッドとしてfilterメソッドがあります。
要素の絞り込み？どういうこと？ と思ったあなたの疑問を本記事は丁寧に解説し、解決していきます。
この記事では
・filterメソッドとは？
・filterメソッドの基本的な使い方
という基礎的な内容から、
・コールバック関数と併用する
・filterメソッドとセレクタ指定の比較
など実践的な内容についても解説していきます。
jQueryのfilterメソッドについて正しく理解し、必要な場面で使いこなすことができるように、わかりやすく解説します！
filterメソッドとは？
jQueryにてHTMLの要素（例えば、divタグやpタグなど）に対して何か処理を行う場合、その処理をどの要素に対して行うかを指定する必要があります。
基本的な要素の指定方法は以下のような構文です。
$(‘...’) // ...の箇所はdivやpなどのタグ名等が入る
例えばHTMLが以下のような場合に、divタグの要素をjQueryで指定する書き方は以下の通りです。
[HTML]
<html>
<head></head>
<body>
<div>サンプル</div>
</body>
</html>
[jQuery]
$(‘div’)
上記の例では、HTML文の中にdivタグが一つしか存在しなかったので、jQueryでdivという要素を指定するだけで’<div>サンプル</div>’という箇所を特定することができました。
ですが、もし、以下のようなHTMLだといかがでしょうか？
[HTML]
<html>
<head></head>
<body>
<div>こんにちは</div>
<div>いい天気ですね</div>
</body>
</html>
もし、jQueryにて２つある<div>の内、片方だけに処理を適用したい場合は、$(‘div’)だけの指定では実現することができません。（両方のdivタグに処理が適用されてしまいます。）
それを解決する手段の一つが今回ご紹介するfilterメソッドです。
次に具体的な使い方をみていくことにしましょう。
filterメソッドの基本的な使い方
filterメソッドの基本的な構文は以下の通りです。
$(‘要素’).filter(‘さらに絞り込むための要素の条件を指定’)
具体的なサンプルで確認してみましょう。
[HTML]
<div> <p id="greeting">こんにちは</p> <p id="purpose">回覧板を届けにきました</p> </div>
[jQuery]
$('p').filter('#greeting').after('<p>田中さん</p>')
実行結果
[HTML]
<div> <p id="greeting">こんにちは</p> <p>田中さん</p> <p id="purpose">回覧板を届けにきました</p> </div>
jQuery内で使用しているafterメソッドは指定要素のあとに引数の要素を追加する機能です。
上のHTMLの例では<p>タグが二つ存在します。
そのため、どちらの<p>タグに処理を適用するかを絞り込むためにfilterメソッドが使われていることが確認できるかと思います。
filterメソッドの引数として、’#greeting’と指定されており、これは<p>タグのid値に頭文字#を付けることで、id値がgreetingの<p>タグを指定することになります。
このようにfilterメソッドは$(‘…’)だけでは要素の指定を絞り込むことができない時に活用します。
notメソッドとの比較
filterメソッドと似た機能をもつメソッドにnotメソッドがあります。
このnotも絞り込みを行うこと自体は同じなのですが、notに続く要素を絞り込みから除外するという処理になります。
こちらも具体的なサンプルで確認してみましょう。
[HTML]
<div> <p id="greeting">こんにちは</p> <p id="purpose">回覧板を届けにきました</p> </div>
[jQuery]
$('p').not('#purpose').after('<p>田中さん</p>')
実行結果
[HTML]
<div> <p id="greeting">こんにちは</p> <p>田中さん</p> <p id="purpose">回覧板を届けにきました</p> </div>
先ほどのfilterメソッドの例と似ていますが、今回はnotメソッドを使い’#purpose’のid値である<p>タグは除く他の要素にafterメソッドを適用してくださいという処理になります。
そのため、結果として、id値greetingの<p>タグに要素が追加されていることが確認できます。
filterメソッドの応用的な使い方
では、さらにfilterメソッドの応用的な使い方をみていくことにしましょう。
コールバック関数と併用する
先ほどまではHTMLの<p>タグなどにid値が設定されているケースでfilterメソッドによる絞り込みを行いました。
ですが、例えば以下のようにid値が設定されていないタグに対して要素の絞り込みを行うにはどうすれば良いでしょうか？
[HTML]
<div> <p>東京都渋谷区</p> <p>東京都豊島区</p> <p>千葉県船橋市</p> <p>埼玉県大宮市</p> </div>
上記のHTMLに対して、東京都の住所は一律”23区”という言葉に置き換える処理を実現したいとします。
これを解決するのが、コールバック関数とfilterメソッドを併用することです。
コールバック関数とは、関数Aの処理を実施する前に別の関数Bの処理を実施し、その結果を関数Aで使う仕組みのことです。
まずは具体的なサンプルコードを確認してみましょう。
[HTML]
<div> <p>東京都渋谷区</p> <p>東京都豊島区</p> <p>千葉県船橋市</p> <p>埼玉県大宮市</p> </div>
[jQuery]
$('p').filter(function(index,element){
return el.textContent.startsWith('東京都');
}).replaceWith('<p>23区</p>')
実行結果
[HTML]
<div> <p>23区</p> <p>23区</p> <p>千葉県船橋市</p> <p>埼玉県大宮市</p> </div>
filterメソッド内の以下がコールバック関数です。
function(index,element){
return el.textContent.startsWith('東京都');
}
上記のコールバック関数では、<p>タグの要素のうち、東京都で始まるテキスト文をもつ<p>タグに絞り込んでいます。
そうして絞り込んだ後に、replaceWithメソッドで文字列の置換をしています。
このように、filterメソッドはセレクタ(#greeting)などの要素で絞り込む以外にコールバック関数を活用して絞り込みを行うこともできます。
filterメソッドとセレクタ指定の比較
ここまでfilterメソッドで要素を絞り込む方法について解説してきましたが、実はfilterメソッドを使わずに要素を絞り込む方法が他にあります。
それが以下のサンプルです。
$('p#greeting').after('<p>田中さん</p>')
$(‘…’)の要素指定の中に、タグ名(p)とid値(#greeting)を繋げて記述する方法です。
それぞれのタグやid値などのセレクタを繋げることで絞り込みを行うことが実はできてしまいます。
ですが、そもそもid値がタグに設定されていない場合などには当然活用できないので、場合に応じてfilterメソッドを使うか、セレクタを繋げて要素を指定するかは使い分けると良いでしょう。
まとめ
本記事ではjQueryのfilterメソッドを中心に要素を指定する際の絞り込み方法についてご紹介しました。
filterメソッドの引数に要素の絞り込み条件を追加することでHTML内に同一のタグなどがあっても特定の要素まで絞り込みを行うことができることがわかりました。
そして、そのfilterメソッドの引数にはセレクタの指定の他にコールバック関数を用いて、より複雑な条件での絞り込みも実現できることがわかりました。
もし今後、filterメソッドに関して迷うことがあれば、ぜひこの記事を思い出して下さいね。
