jQueryのfilterメソッドの使い方とサンプルコード
33 回閲覧されました
みなさんこんにちは、jonioです。
今回はjQueryのfilterメソッドの使い方とサンプルコードの解説になります。
filterメソッドとは何
例えば下記のコードがあったとします。
//HTML
<ul>
<li>Apple</li>
<li>Orange</li>
<li>Banana</li>
<li>Grape</li>
</ul>
//jQuery
$('li').css('color', 'red');この場合全てのliタグに対してjQueryが適用されますが特定のliタグにのみjQueryを適用したい時に使うのがfilterメソッドです。
サンプルコード
引数に指定したい物を記述して使います。
引数に使えるのは下記の場合です
- 特定のclassやid
- 関数
- jQuery
それぞれ見ていきます。
特定のclassやid
下記のコードで考えます。
<ul>
<li class="selected">Apple</li>
<li>Orange</li>
<li class="selected">Banana</li>
<li>Grape</li>
</ul>
<script>
$(document).ready(function() {
$('li').filter('.selected').css('color', 'red');
});
</script>10行目でfilterメソッドを使っています。
今回はclassを使っていますがselectedがidの場合は「.selected」を「#selected」と記述します。
filterメソッドでclass名がselectedの物を選択しています。
これでAppleとBananaの文字の色が赤になります。
関数
下記のコードで考えます。
<ul>
<li>Apple</li>
<li>Orange</li>
<li>Banana</li>
<li>Grape</li>
</ul>
<script>
$(document).ready(function() {
$('li').filter(function() {
return $(this).text().length > 5;
}).css('color', 'blue');
});
</script>先程はfilterメソッドの引数がclassだったのが今回は関数になっています。
filterメソッドで文字数が5より多い値を選択しています。
これでOrangeとBananaの文字が青色になります。
jQuery
下記のコードで考えます。
<ul>
<li>Apple</li>
<li>Orange</li>
<li>Banana</li>
<li>Grape</li>
</ul>
<script>
$(document).ready(function() {
$('li').filter($('li').eq(2)).css('font-weight', 'bold');
});
</script>先程はjQueryの引数に関数を使っていましたが今回はjQueryになっています。
filterメソッドで「$(‘li’).eq(2)」はliタグの中のインデックス番号が2の物（Banana）を選択しています。
これでBananaが太文字になります。