初心者向けのjQuery入門講座|デザイナー向けのJavaScriptライブラリ
このエントリーをはてなブックマークに追加
索引
1章：jQuery入門
2章：jQuery基礎
3章：jQuery発展
番外編：研究

セレクタの自作(2)

概要

引数を利用できるセレクタを自作する

前回はフィルタタイプのセレクタを作成しましたが、このフィルタタイプのセレクタは引数を利用することができます。例えばgtメソッドは引数で指定した番号より大きいインデックス番号を持つ要素を選択します

解説

セレクタの拡張

前回作成したサンプル（make1/02.html）では要素の幅が80pxと固定されていましたが、この値を引数で自由に設定できるようにします。サンプル（make2/01.html）を開いて下さい。まずは自作のセレクタを利用している以下の行を確認しましょう。前回のサンプルと異なりフィルタの後に（ ）があり、その中に引数として100が設定されています。 

$(function () {
	$("div:largeArea(100)").text("big");
});

つづいてフィルタの処理で、どのように引数を受け取るかを確認します。引数を受け取るのは以下の２行目、functionの引数を受け取る部分です。前回のサンプルと比較して、elemの他にiとdataObjが追加されています。このうちiにはページ内の要素の番号が入っているだけなので利用しません。dataObjだけを利用します。 

$.extend($.expr[":"], {
	largeArea: function(elem, i, dataObj) {
		var myWidth = $(elem).width();
		return myWidth >= dataObj[3];
	}
});

しかしdataObjには引数以外にも色々なデータが格納されており、引数を取り出すためには以下の様に３番目の要素を指定します。このサンプルでは、前回80と固定していた以下4行目の部分で引数を利用しています。 

$.extend($.expr[":"], {
	largeArea: function(elem, i, dataObj) {
		var myWidth = $(elem).width();
		return myWidth >= idataObj[3];
	}
});

本当にidataObj[3]に引数で渡した100が入っているか確認できるように、アラートで表示するようにしたサンプル（make2/01b.html）を用意したので確認して下さい。ページを開くとアラートによって100と表示されるのが確認できます。

アラートが6回表示されるのはページ内にdiv要素が6つ有るためです。今回作成した:largeAreaはdiv要素に続けて記述しているので、ページ内にある全てのdiv要素ついて調べているのです。

メモ

v1.8.0では機能しませんでした

ここで紹介したサンプルはv1.7.2で作成していたのですが、v1.8.0に変更したところ機能しなくなってしまいました...。jQueryではこのようなことがあり得るので、安易に利用するバージョンを変更しない方がよいと思います。この原稿を記述している現在ではv1.8.2がリリースされているので、これに変更したところ機能するようになりました。参考にv1.8.0の機能しないサンプルを紹介しておきます。→サンプル（make2/test01.html）

以下の様に利用しているjQueryのバージョンを1.8.0にしただけで、他に変更はありません。それなのに一番右のdiv要素に「big」と表示されず、機能しなくなっているのが確認できます。 

<script type="text/javascript" src="../../../css_js/jquery-1.8.0.min.js">

次回はjavaScriptのテクニックであるクロージャについて説明します。クロージャはjQueryでも利用できます。