配列の要素を検索するにはjQueryのinArray() を使用します。
jQueryのinArray()とは配列内の要素を検索し、検索した要素のインデックスを返すメソッド になります。
また、検索したい値が配列内に複数見つかった場合は最初に見つけた値のインデックスを返すようになり、検索したい値が配列内に複数見つからなかった場合は-1を返します。
そして、inArray()メソッドは二次元配列や三次元配列のような多次元配列の中からでも値を検索することができます。
今回は、jQueryのinArray()を使って配列の要素を検索する方法 について以下の内容で解説していきます。
⚫︎ 検索した要素が見つかった場合 検索した要素が見つからなかった場合 検索した要素が複数見つかった場合
⚫︎ 二次元配列の要素を検索する場合 三次元配列の要素を検索する場合
ハルトさん
今回はjQueryのinArraty()で指定した要素で囲む方法について説明していきます。
さとみさん
inArray()とは
jQueryのinArray()とは配列内の要素を検索し、検索した要素のインデックスを返すメソッドになります。
inArray()の書き方
inArray()の書き方は下記となります。
$ . inArray ( "検索する値" , "検索対象の配列" ) ;
inArrary()のパラメータ
⚫︎ 検索する値 :配列の中から検索したい値 を指定する検索対象の配列 :検索する配列 を指定する
inArray()のパラメータに検索する値と検索対象の配列を指定することで、検索対象の配列から検索する値を検索することができます。-1 を返します。
配列の要素を検索するサンプルコード
配列の要素を検索するサンプルコードを紹介します。
検索した要素が見つかった場合
inArray()で検索した要素が見つかった場合を見てみます。
sample.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
< ! DOCTYPE html >
< html lang = "ja" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title > Document < / title >
< link rel = "stylesheet" href = "style.css" >
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" > </script>
< / head >
< body >
< h2 > 配列から要素を検索する< / h2 >
< div >
< p > < / p >
< p > < / p >
< p > < / p >
< / div >
<script src = "index.js" > </script>
< / body >
< / html >
index.js
let arr = [ "イチゴ" , "バナナ" , "パイナップル" , "リンゴ" , "グレープ" ] ;
$ ( "p:eq(0)" ) . text ( "イチゴの検索結果: " + $ . inArray ( "イチゴ" , arr ) ) ;
$ ( "p:eq(1)" ) . text ( "グレープの検索結果: " + $ . inArray ( "グレープ" , arr ) ) ;
$ ( "p:eq(2)" ) . text ( "バナナの検索結果: " + $ . inArray ( "バナナ" , arr ) ) ;
出力結果
検索した要素が見つかった場合、inArray()メソッドは見つかった値のインデックスを返します。
検索した要素が見つからなかった場合
inAraay()で検索した要素が見つからなかった場合を見てみます。
sample.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
< ! DOCTYPE html >
< html lang = "ja" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title > Document < / title >
< link rel = "stylesheet" href = "style.css" >
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" > </script>
< / head >
< body >
< h2 > 配列から要素を検索する< / h2 >
< div >
< p > < / p >
< p > < / p >
< p > < / p >
< / div >
<script src = "index.js" > </script>
< / body >
< / html >
index.js
let arr = [ "イチゴ" , "バナナ" , "パイナップル" , "リンゴ" , "グレープ" ] ;
$ ( "p:eq(0)" ) . text ( "キウイの検索結果: " + $ . inArray ( "キウイ" , arr ) ) ;
$ ( "p:eq(1)" ) . text ( "ドリアンの検索結果: " + $ . inArray ( "ドリアン" , arr ) ) ;
$ ( "p:eq(2)" ) . text ( "マンゴーの検索結果: " + $ . inArray ( "マンゴー" , arr ) ) ;
出力結果
検索した要素が見つからなかった場合、inArray()メソッドは-1を返します。
検索した要素が複数見つかった場合
inAraay()で検索した要素が複数見つかった場合を見てみます。
sample.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
< ! DOCTYPE html >
< html lang = "ja" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title > Document < / title >
< link rel = "stylesheet" href = "style.css" >
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" > </script>
< / head >
< body >
< h2 > 配列から要素を検索する< / h2 >
< div >
< p > < / p >
< p > < / p >
< p > < / p >
< / div >
<script src = "index.js" > </script>
< / body >
< / html >
index.js
let arr = [ "イチゴ" , "バナナ" , "キウイ" , "リンゴ" , "マンゴー" , "イチゴ" , "バナナ" , "キウイ" ] ;
$ ( "p:eq(0)" ) . text ( "イチゴの検索結果: " + $ . inArray ( "イチゴ" , arr ) ) ;
$ ( "p:eq(1)" ) . text ( "バナナの検索結果: " + $ . inArray ( "バナナ" , arr ) ) ;
$ ( "p:eq(2)" ) . text ( "キウイの検索結果: " + $ . inArray ( "キウイ" , arr ) ) ;
出力結果
検索した要素が複数見つかった場合、inArray()メソッドは最初に見つかった値のインデックスを返します。
多次元配列の要素を検索するサンプルコード
多次元配列の要素を検索するサンプルコードを紹介します。
二次元配列の要素を検索する場合
二次元配列の要素を検索する場合を見てみます。
sample.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
< ! DOCTYPE html >
< html lang = "ja" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title > Document < / title >
< link rel = "stylesheet" href = "style.css" >
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" > </script>
< / head >
< body >
< h2 > 二次元配列から要素を検索する< / h2 >
< div >
< p > < / p >
< p > < / p >
< p > < / p >
< / div >
<script src = "index.js" > </script>
< / body >
< / html >
index.js
let arr = [
[ "イチゴ" , "バナナ" ] ,
[ "パイナップル" , "リンゴ" ] ,
[ "グレープ" , "グレープフルーツ" ]
] ;
$ ( "p:eq(0)" ) . text ( "イチゴの検索結果: " + $ . inArray ( "イチゴ" , arr [ 0 ] ) ) ;
$ ( "p:eq(1)" ) . text ( "リンゴの検索結果: " + $ . inArray ( "リンゴ" , arr [ 2 ] ) ) ;
$ ( "p:eq(2)" ) . text ( "バナナの検索結果: " + $ . inArray ( "バナナ" , arr [ 1 ] ) ) ;
出力結果
検索対象の配列にインデックスを1つ指定することで二次元配列の要素を検索することができます。
さとみさん
検索対象の配列にインデックスを1つ指定することで二次元配列の要素を検索していますね！
ハルトさん
そうですね。
三次元配列の要素を検索する場合
三次元配列の要素を検索する場合を見てみます。
sample.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
< ! DOCTYPE html >
< html lang = "ja" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title > Document < / title >
< link rel = "stylesheet" href = "style.css" >
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" > </script>
< / head >
< body >
< h2 > 三次元配列から要素を検索する< / h2 >
< div >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< p > < / p >
< / div >
<script src = "index.js" > </script>
< / body >
< / html >
index.js
let arr = [ [
[ "イチゴ" , "バナナ" ] ,
[ "パイナップル" , "リンゴ" ] ,
[ "グレープ" , "マスカット" ]
] ,
[ [ "strawberry" , "banana" ] ,
[ "pine" , "apple" ] ,
[ "grape" , "muscat" ]
] ] ;
$ ( "p:eq(0)" ) . text ( "イチゴの検索結果: " + $ . inArray ( "イチゴ" , arr [ 0 ] [ 0 ] ) ) ;
$ ( "p:eq(1)" ) . text ( "リンゴの検索結果: " + $ . inArray ( "リンゴ" , arr [ 0 ] [ 1 ] ) ) ;
$ ( "p:eq(2)" ) . text ( "バナナの検索結果: " + $ . inArray ( "バナナ" , arr [ 0 ] [ 1 ] ) ) ;
$ ( "p:eq(3)" ) . text ( "strawberryの検索結果: " + $ . inArray ( "strawberry" , arr [ 1 ] [ 0 ] ) ) ;
$ ( "p:eq(4)" ) . text ( "appleの検索結果: " + $ . inArray ( "apple" , arr [ 1 ] [ 1 ] ) ) ;
$ ( "p:eq(5)" ) . text ( "muscatの検索結果: " + $ . inArray ( "muscat" , arr [ 1 ] [ 1 ] ) ) ;
出力結果
検索対象の配列にインデックスを2つ指定することで三次元配列の要素を検索することができます。
さとみさん
検索対象の配列にインデックスを2つ指定することで二次元配列の要素を検索していますね！
ハルトさん
そうですね。
今回のポイント inArray()で配列の要素を検索
⚫︎ inArray()メソッドのパラメータには検索したい値と検索対象の配列 を指定する
⚫︎ inArray()メソッドで検索した要素が見つかった場合は検索した値のインデックス を返す
⚫︎ inArray()メソッドで検索した要素が見つからなかった場合は-1 を返す
⚫︎ inArray()メソッドで検索した要素が複数見つかった場合は最初に見つかった値のインデックス を返す
⚫︎ 二次元配列の要素を検索するにはinArray()メソッドのパラメータである検索対象の配列にインデックスを1つ 指定する
⚫︎ 三次元配列の要素を検索するにはinArray()メソッドのパラメータである検索対象の配列にインデックスを2つ 指定する
Writer
ST
株式会社flyhawkのSTです。フライテックメディア事業部でのメディア運営・ライター業務なども担当。愛機はMac Book AirとThinkPad。好きな言語：swift、JS系(Node.js等)。好きなサーバー：AWS。受託開発やプログラミングスクールの運営をしております。ご気軽にお問い合わせください。
