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

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

jQuery.inArray( )配列内に特定の要素があるかをチェック

構文

配列内に特定の要素があるかをチェック返値:数値
jQuery.inArray( 値, 配列 [,インデックス番号] )ver1.2〜

機能

jQuery.inArrayメソッドは第1引数に設定した値が、第2引数に設定した配列内に存在するかをチェックします。存在する場合は、その要素のインデックス番号を返し、存在しない場合は-1を返します。要素内に複数の合致する値がある場合でも、最初に発見した要素のインデックス番号しか返さないことに注意してください。

第3引数にインデックス番号を指定することで、そのインデックス番号からチェックを開始することができます。

解説

配列内に特定の要素があるかをチェックする

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

var myArray = ["john", "bob", "tom"];

続いて以下の部分を確認してください。buttonをクリックするとjQuery.inArrayメソッドを利用して、文字列「john」が配列「myArray」内に存在するかをチェックします。チェックした結果は変数chkに代入しアラートで表示します。

$("button").click(function(){
	var ansIndex = $.inArray("john", myArray);
	alert(ansIndex);
});

文字列「john」は配列「myArray」の0番目の要素なので、buttonをクリックするとアラートで「0」と表示されます。ついでに配列内に存在しない場合のサンプルも作成しました。

サンプル(inArray/01b.html)を開いてinArray/01.htmlとほとんど同じことを確認してください。異なるのは以下の様に、第1引数に「meg」を設定した点だけです。これは配列「myArray」内に存在しません。

$("button").click(function(){
	var ansIndex = $.inArray("meg", myArray);
	alert(ansIndex);
});

結果として、buttonをクリックするとアラートで「-1」と表示されます。

複数の要素検出には対応していません

jQuery.inArrayメソッドは複数の要素検出には対応していません。合致する要素が複数あった場合は、最初に検出した要素のインデックス番号しか返しません。サンプル(inArray/02.html)を開いて、配列「myArray」が以下のように変更されていることを確認してください。

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

そしてjQuery.inArrayメソッドは以下の様に「3」の値を検出するようにしています。

$("button").click(function(){
	var ansIndex = $.inArray(3, myArray);
	alert(ansIndex);
});

結果として、buttonをクリックするとアラートで「2」と表示され、最初の3の値しか検出しないことを確認してください(3の値は他に10番目にあります)。

チェックを開始するインデックス番号を指定できます

jQuery.inArrayメソッドは第3引数にインデックス番号を指定することで、そのインデックス番号からチェックを開始することができます。 サンプル(inArray/03.html)を開いてinArray/02.htmlとほとんど同じ事を確認してください。異なるのは以下の様にjQuery.inArrayメソッドの第3引数に3が設定されている点だけです。

$("button").click(function(){
	var ansIndex = $.inArray(3, myArray, 3);
	alert(ansIndex);
});

配列「myArray」で3番目以降に3が登場するのは以下の様に10番目です。

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

結果として、buttonをクリックするとアラートで「10」と表示されます。

メモ

複数の要素に対応した処理を作成してみた

第3引数の開始インデックス番号を利用して複数の要素に対応したfunction「checkArray」を作成してみました。仕組みとしては要素を見つける度に開始インデックスを変更して-1が返ってくるまで調べます。
→サンプル(inArray/test01.html)--結果は配列で返ってきます。

function checkArray(myArray, vol){
	var chkIndex = 0;
	var ansArray = [];
	while(true){
		chkIndex = $.inArray(vol, myArray, chkIndex);
		if (chkIndex == -1) break;
		ansArray.push(chkIndex);
		chkIndex++;
	}
	return ansArray;	
}