jQuery filter()の例
jQueryフィルタ関数は、一致するセレクタまたは関数のテストを使用して、一致する要素のセットから要素を抽出するのに便利な機能です。
1.フィルター(セレクター)
一致する要素のセットで、filter()セレクタにのみ一致する要素を取得します。
例えば、
$("div").filter("#div1").css('background-color', 'blue');
すべてのdiv要素を一致させ、idが “div1″であるdiv要素を選択し、要素の背景色を青に変更します。
2.フィルター(関数)
一致する要素のセットで、関数のテストに合格する要素を取得します。この関数は、一致する要素のインデックスを表すindexパラメーターを内部で渡します。カウントは0からカウントされます。
例えば、
$('div').filter(function(index) { if(index==2 || index==3){//0 index based return true; } }).css('background-color', 'blue');
すべてのdiv要素を一致させ、3番目(2)と4番目(3)のdiv要素のみを選択する関数でフィルタします。
$('div').filter(function(index) { return $("b", this).length == 1; }).css('background-color', 'blue');
すべてのdiv要素を一致させ、<b>タグを含むdiv要素を選択する関数でフィルタします。
jQuery filter()の例
<html> <head> <title>jQuery filter example</title> <script type="text/javascript" src="jquery-1.3.2.min.js"></script> </head> <body> <h1>jQuery filter example</h1> <script type="text/javascript"> $(document).ready(function(){ $("#filterSelector").click(function () { $('div').css('background-color', 'white'); $("div").filter("#div1").css('background-color', 'blue'); }); $("#filterFunction").click(function () { $('div').css('background-color', 'white'); $('div').filter(function(index) { if(index==2 || index==3){//0 index based return true; } }).css('background-color', 'blue'); }); $("#filterFunction2").click(function () { $('div').css('background-color', 'white'); $('div').filter(function(index) { return $("b", this).length == 1; }).css('background-color', 'blue'); }); }); </script> </head><body> <div id="div1"> <b>This is div 1 with 'b' tag</b> </div> <div id="div2"> This is div 2 </div> <div id="div3"> <b>This is div 3 with 'b' tag</b> </div> <div id="div4"> This is div 4 </div> <br/> <br/> <br/> <input type='button' value='filter(selector)' id='filterSelector'> <input type='button' value='filter(index)' id='filterFunction'> <input type='button' value='filter(index)+b' id='filterFunction2'> </body> </html>