jQuery逆引きリファレンス
配列の内容を検索するには？（$.inArray）
$.inArrayメソッドを使って、配列から特定の要素を検索する方法を解説。Internet Explorer 8以前の環境ではJavaScriptのindexOfメソッドをこれで代替しよう。
配列から特定の要素を検索するには、$.inArrayメソッドを利用します。標準のJavaScriptにも同等のメソッドとしてindexOfがありますが、Internet Explorerではバージョン9以降での動作が前提です。Internet Explorer 8以前の環境を想定しなければならない状況がまだまだあることを考えると、現時点では、$.inArrayメソッドを利用するのが無難でしょう*1。
- *1 標準のJavaScriptには、配列を逆順に検索する
lastIndexOfメソッドもありますが、jQueryではこれに直接対応するメソッドはありません。
$.inArrayメソッドの基本
まずは、基本的な例を見ていきます。以下は、配列numbersから数値15を検索する例です。
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery TIPS</title>
</head>
<body>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function() {
// 検索対象の配列
var numbers = [ 1, 15, 30, 45, 60, 75 ];
console.log($.inArray(15, numbers)); // 結果：1
});
</script>
</body>
</html>
|
$.inArrayメソッドの構文は、以下の通りです。
［構文］$.inArrayメソッド
戻り値は、配列の先頭要素を0として、初めて見つかった位置を返します（複数の要素が合致する場合にも、最初の1つの位置だけを返します）。
要素が見つからなかった場合には、$.inArrayメソッドは-1を返します。つまり、配列に特定の要素が存在するかどうかを判定するならば、$.inArrayメソッドの戻り値が-1でないかどうかを確認すればよいわけです。
$.inArrayメソッドの注意点
ごくシンプルなメソッドですが、注意すべき点もあります。というのも、$.inArrayメソッドによる比較は厳密な===演算子による比較であるという点です。例えば、先ほどのコードの太字部分を以下のように書き換えてみましょう。
|
console.log($.inArray('15', numbers));
|
結果は-1（＝該当する要素はない）となります。配列numbersは数値配列ですが、その検索値はクォート（'）でくくられた結果、文字列型と見なされます。結果、同じ15でも型が異なるため、$.inArrayメソッドは「該当する要素はない」と見なすわけです。
検索開始位置を指定する
$.inArrayメソッドの第3引数には検索開始位置を指定することもできます。先頭要素を0として指定します。
例えば以下は検索開始位置を2としていますので、検索結果も5に変化し、後方の15に合致していることが確認できます。
|
console.log($.inArray(15, numbers, 2));
|
これを利用して、配列から条件値に合致する全ての要素位置を検出することもできます。
|
var numbers = [ 1, 15, 30, 45, 60, 15 ];
// 1検索開始位置
var current = -1;
do {
// 2現在位置の次の要素から値を検索
current = $.inArray(15, numbers, current + 1);
// 3結果が-1でない場合にだけ出力
if (current !== -1) { console.log(current); }
} while (current !== -1); // 結果：1、5
|
変数currentは、「現在の検索開始位置」を意味します。デフォルトは先頭の直前としておきます（1）。あとは、この「開始位置 + 1」から検索を開始するようにし、目的の要素が見つかったら、その位置で変数currentを上書きします（2）。
これによって、次のループは今回見つかった位置の次から検索を開始します。これを$.inArrayメソッドが-1を返すまで繰り返すことで、全ての要素を検索できます。
なお、要素が見つからなかったことを意味する-1を表示しないよう、3で除外します（＝-1でない結果だけを出力）。
API：jQuery.inArray() カテゴリ：Utilities（ユーティリティ）
※以下では、本稿の前後を合わせて5回分（第12回～第16回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
12. 配列の内容を順番に加工するには？（$.map）
$.mapメソッドを使って、配列やオブジェクトの内容を順に加工する方法を解説。Internet Explorer 8以前の環境ではJavaScriptのmapメソッドをこれで代替しよう。
13. 配列から特定の条件で要素を取り出すには？（$.grep）
$.grepメソッドを使って、配列から条件に合致した要素だけを取り出す方法を解説。Internet Explorer 8以前の環境ではJavaScriptのfilterメソッドをこれで代替しよう。
14. 【現在、表示中】≫ 配列の内容を検索するには？（$.inArray）
$.inArrayメソッドを使って、配列から特定の要素を検索する方法を解説。Internet Explorer 8以前の環境ではJavaScriptのindexOfメソッドをこれで代替しよう。
