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

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

jQuery.grep( )配列の要素を選別

構文

配列の要素を選別返値:配列
jQuery.grep( 配列, function [, true] )ver1.0〜
引数に設定するfunctionは以下の引数を受け取ります
・第1引数:調査対象の配列
・第2引数:選別処理を設定したfunction
・第3引数:true/false

機能

jQuery.grepメソッドは第1引数に設定した配列の要素を、第2引数のfunction内に設定した条件で選別します(function内でtrueを返した要素だけを抽出し、falseを返した要素は破棄します)。

選別した結果(配列)は返値として渡され、第1引数に設定した配列は変更されません。第3引数にtrueを設定すると選別の設定を逆(falseの要素だけを抽出)にすることができます。

解説

配列の要素を選別します

サンプル(grep/01.html)を開いてbody内にbutton要素しかないことを確認して下さい。jQueryでは、まず以下の部分を確認してください。配列「myArray」が作成してあります。

var myArray = [1,9,3,8,6,1,5,9,4,7,3,8,6,9,1];

続いて以下の部分を確認してください。buttonをクリックするとjQuery.grepメソッドを利用して配列「myArray」をfunction「grepFunc」を利用して選別します。選別された配列は変数「ansArray」に代入して、appendメソッドを利用してbody要素内に表示します。

$("button").click(function(){
	var ansArray = $.grep(myArray, grepFunc);
	$("body").append(ansArray);
});

jQuery.grepメソッドに設定するFunctionは以下の様な構文になっています。このfunctionは2つの引数(要素の値とインデックス番号)を受け取ります。これらの情報を利用して配列の要素を選別します。returnでtrueを返した要素だけ抽出され、falseの要素は抽出されません

jQuery.grepメソッドに設定するFunctionの構文
function 任意の名前(要素の値, インデックス番号){
 trueを返した要素を抽出します
}

サンプルで設定された「grepFunc」は以下の様に記述され、要素が5より小さい時だけtrueを返すようにしてあります。つまり5より小さい要素のみを抽出します。

function grepFunc(elem, index){
	return elem < 5;
};

結果として、buttonをクリックすると配列「myArray」から5より小さい要素だけを抽出しbody要素内に表示します。表示される内容は「131431」です。

元の配列は変更しません

念のため、元の配列「myArray」が変更されていないことを確認します。サンプル(grep/01b.html)を開いて、appendメソッドで表示する内容をmyArrayに変更していることを確認して下さい。

$("button").click(function(){
	var ansArray = $.grep(myArray, grepFunc);
	$("body").append(myArray);
});

buttonをクリックするとmyArrayの内容が変更されずに表示されます。当たり前のように感じるかもしれませんがmergeメソッドextendメソッドのように元の配列(やobjectオブジェクト)を変更してしまうメソッドもあるのです。

配列の分別(第3引数にtrueを設定する)

jQuery.grepメソッドの第3引数にtrueを設定すると、第2引数のfunction内でfalseを返した要素だけを抽出するようになります。サンプル(grep/02.html)を開いて、grep/01.htmlと異なる点は以下の様にjQuery.grepメソッドの第3引数にtrueが設定されていることだけなのを確認してください。

$("button").click(function(){
	var ansArray = $.grep(myArray, grepFunc, true);
	$("body").append(ansArray);
});

結果として、buttonをクリックすると配列「myArray」から「5以上の要素」だけを抽出しbody要素内に表示します。表示される内容は「986597869」です。

これは選別に漏れた配列も欲しい時に便利でしょう。例えば合格した要素の配列と、不合格の要素の配列に分別したいときなどです。サンプル(grep/02b.html)を開いてjQueryが以下の様に記述されていることを確認してください。

var ansArray = $.grep(myArray, grepFunc);//---5未満の要素を選別
$("body").append(ansArray);
$("body").append("<br/>");
var ansArray = $.grep(myArray, grepFunc, true);//---5以上の要素を選別
$("body").append(ansArray);

結果としてbuttonをクリックすると5未満の配列(上段)と、5以上の配列(下段)が分別して表示されます。

関連項目

要素を選別するのではなく、要素の値を変更したい場合はjQuery.mapメソッドを利用して下さい。

メモ

データの抽出に便利かも

配列の中にobjectオブジェクトで作成したデータを設定しておくと、jQuery.grepメソッドを利用してデータの抽出ができます。サンプル(grep/test01.html)を開いて、以下の様に配列「myArray」内にobjectオブジェクトのデータがあることを確認してください。

var myArray = [
	{name:"bob", sex:"male", age:18},
	{name:"meg", sex:"female", age:20},
	{name:"tom", sex:"male", age:22},
	{name:"beth", sex:"female", age:25},
	{name:"john", sex:"male", age:30}
];

そして抽出に利用するgrepFuncは以下の様になっており、要素のsexプロパティの値が「female」の要素だけを抽出するようにしました。

function grepFunc(elem, index){
	return elem.sex == "female";
};

buttonをクリックすると、抽出した配列「ansArray」をjQuery.eachメソッドappendメソッドを利用して抽出された配列のnameプロパティの値をbody内に表示するようにしました。

var ansArray = $.grep(myArray, grepFunc);
$.each(ansArray, function(index, elem){
	$("body").append(elem.name + "<br/>");
});

結果として、buttonをクリックするとsexプロパティがfemaleに設定されたmegとbethが表示されます。

配列同士を引き算するfunctionを作ってみた

javaScriptには配列同士を引き算するメソッドが内ので、$.grepを利用して作成してみました。
→サンプル(grep/test02.html

function subtractArrayFunc(array1,array2){
	var ansArray = $.grep(array1, function(elem, index){
		for (var i in array2) {
			if (elem == array2[i]) return false;
		}
		return true;
	});
	return ansArray;
}

$.grepを利用しない場合はforを入れ子にするので上記以上の複雑さになりますが、上記もそれなりに複雑...。jQueryのユーティリティには配列に関するメソッドが色々あるので、配列を引き算するメソッドがあっても良いのになぁ、と思いました。phpには配列の差を求める関数(メソッド)があるそうです。
→参考:google検索「php array_diff

objectオブジェクトには対応していません

jQuery.mapメソッドjQuery.eachメソッドは配列だけでなくobjectオブジェクトにも対応しているので、grepメソッドも「もしかしたら」と思ったのですが...ダメでした。

サンプル(grep/test03.html)を開いて、以下の様に配列「myArray」にobjectオブジェクトが設定されていることを確認して下さい。

var myArray = {name:"bob", sex:"male", age:18};

grepメソッドで実行するgrepFuncでは以下の様に引数の値をアラートで表示するようにしました。

function grepFunc(elem, index){
	alert(elem + " " + index);
};

しかしbuttonをクリックしても何も表示されず、やはりobjectオブジェクトには利用できないことが確認できます。mapメソッドやeachメソッドであれば、functionの引数には、プロパティ名とプロパティの値が渡されます。