デザイナーにも分かりやすいjQuery入門講座|jQueryの使い方

このエントリーをはてなブックマークに追加
索引
Core:コアとなる仕組み
Selectors:セレクタ
Attributes:属性
Traversing:対象の変更
Manipulation:操作
CSS:スタイルシート
Events:イベント
Effects:演出効果
Ajax:xml等との連携
Utilities:ユーティリティ
Data:データ
Miscellaneous:諸々
Deferred:処理管理
Callbacks:コールバック
Internals:内部処理

.filter( )指定した要素を選択

構文

指定した要素を選択返値:jQueryオブジェクト
jQo.filter( セレクタ )ver1.0〜
jQo.filter( function )ver1.0〜
jQo.filter( jQo/DOM )ver1.4〜

機能

jQueryオブジェクトで指定した要素のうちセレクタで指定した要素を選択します。引数にはfunctionを設定することも可能で、条件によって選択する内容を変更するなど高度な処理にも対応できます。

ver1.4から引数にjQueryオブジェクトやDOM要素を設定することもできるようになりました。

解説

引数にセレクタを設定

サンプル(filter/01.html)を開いてul要素が2つあり、それぞれli要素を5つ持っていることを確認して下さい。下のul内にある3番目のliにだけtestのクラス属性が付けられています。

jQueryは以下の様に記述され、buttonをクリックするとli要素のうちfilterメソッドの引数で指定したtestのクラス属性を持つ要素を選択します。選択した要素はcssメソッドを利用して背景を赤くしています。

$("button").click(function(){
	$("li").filter(".test").css("background-color","#f99");
})

結果として、buttonをクリックするとli要素のうちtestのクラス属性をもつ要素(list item C)が選択され背景色が赤くなります。

引数にFunctionを設定

サンプル(filter/02.html)を開いてul要素が2つあり、それぞれli要素を5つ持っていることを確認して下さい。クラス属性の指定はありません。jQueryは以下の様に記述されfilterメソッドの引数にfunctionの「filterFunc」が設定されています。

$("button").click(function(){
	$("li").filter(filterFunc).css("background-color","#f99");
})

filterメソッドの引数に設定するFunctionは以下の様な構文になっています。まず引数(インデックス番号)を受け取ります。これらの引数の値は{}内の処理で利用することができます。そして任意の処理の後で、選択する要素はtrue、選択しない要素はfalseをreturnで返すようにします。

filterに設定するFunctionの構文
function 任意の名前(インデックス番号){
 任意の処理(引数を利用可能)
 return true/false;
}

サンプルfilter/02.htmlで利用したfilterFuncは以下の様になっており、インデックス番号を3で割った余りが0だったら選択(trueを返す)ようにしています。結果として、buttonをクリックすると3つおきにli要素が選択されます。

function filterFunc(index){
	if (index%3 == 0){
		return true;
	}else{
		return false;
	}
}

サンプルfilter/02.htmlのfilterFuncはtrueやfalseを返していることを分かりやすく記述しましたが、比較式は正しければtrueになるのでサンプル(filter/02b.html)のように記述することも可能です。

function filterFunc(index){
	return index%3==0;
}

引数にjQUeryオブジェクトを利用

サンプル(filter/03.html)を開いてhtmlの構成がサンプルfilter/01.htmlと同じ事を確認してください。jQueryは以下の様に変更されfilterメソッドの引数にmyObjが設定されています。myObjは1行目で作成されたtestのクラス属性にマッチするjQueryオブジェクトです。

var myObj = $(".test");
$("button").click(function(){
	$("li").filter(myObj).css("background-color","#f99");
})

結果としてサンプルfilter/01.htmlと全く同じ動作になります。無意味な構文に感じるかもしれませんが、この構文は処理の高速化につながります。jQueryではマッチした要素を選択するのに負荷がかかるため、選択の回数をなるべく減らす必要があります。ですので、すでに要素を選択したjQueryオブジェクトを使いまわすことで負荷が減るのです。→参考:使い方「jQueryの高速化:jQueryはオブジェクトに記憶しておく」
今回のサンプルではfilterメソッドのためにわざわざjQueryオブジェクトを作成しているので高速化にはつながりません。

関連項目

mapメソッドとの違い

filterメソッドは引数にfunctionを利用することで任意のフィルタリングをできますが、functionに渡される引数がインデックス番号だけなので複雑なフィルタリングはできません。より複雑なフィルタリングをしたい場合はmapメソッドを利用してください。これは引数に設定したfunctionに要素の情報が送られてくるため、要素の情報に応じて任意のフィルタリンクをすることができます。

メモ

Traversingのメリット

複数のセレクタ(and)を利用すればfilterメソッドと同じようなことが可能です。サンプル(filter/test01.html)を開いてbody内の構成がサンプルfilter/01.htmlと同じ事を確認してください。

jQueryはセレクタの部分を複数のセレクタ(and)を利用したものに置き換えただけです。buttonをクリックするとサンプルfilter/01.htmlと同じ結果になることを確認して下さい。

$("button").click(function(){
	$("li.test").css("background-color","#f99");
})

しかしトラバースのfilterメソッドは引数にfunctionを利用できるため、複数のセレクタ(and)よりも高度な処理が可能です

簡易クイズに利用できるかも

サンプル(filter/test02.html)を開いてbody内の構成を確認し、li要素の内「選択肢3」にだけseikaiのクラス属性があることを確認して下さい。

<li>選択肢 1</li>
<li>選択肢 2</li>
<li class="seikai">選択肢 3</li>
<li>選択肢 4</li>
<li>選択肢 5</li>

続いてjQueryを確認してください。以下の様にli要素がクリックされたら、クリックした要素(this)にseikaiのクラス属性があるときだけ選択します。

$("li").click(function(){
	$(this).filter(".seikai").css("background-color","#f99");
})

結果として「選択肢3」をクリックした時だけ背景色がピンクになりますが、それ以外のli要素は反応しません。