【jQuery】inArray()を使って配列の要素を検索する！

配列の要素を検索するにはjQueryのinArray()を使用します。

jQueryのinArray()とは配列内の要素を検索し、検索した要素のインデックスを返すメソッドになります。

また、検索したい値が配列内に複数見つかった場合は最初に見つけた値のインデックスを返すようになり、検索したい値が配列内に複数見つからなかった場合は-1を返します。

そして、inArray()メソッドは二次元配列や三次元配列のような多次元配列の中からでも値を検索することができます。

今回は、jQueryのinArray()を使って配列の要素を検索する方法について以下の内容で解説していきます。

⚫︎ 検索した要素が見つかった場合
⚫︎ 検索した要素が見つからなかった場合
⚫︎ 検索した要素が複数見つかった場合

⚫︎ 二次元配列の要素を検索する場合
⚫︎ 三次元配列の要素を検索する場合

今回はjQueryのinArraty()で指定した要素で囲む方法について説明していきます。

お願いします！

inArray()とは

jQueryのinArray()とは配列内の要素を検索し、検索した要素のインデックスを返すメソッドになります。

inArray()の書き方

inArray()の書き方は下記となります。

$.inArray("検索する値", "検索対象の配列");

1	$.inArray("検索する値", "検索対象の配列");

inArrary()のパラメータ

⚫︎ 検索する値:
配列の中から検索したい値を指定する
⚫︎ 検索対象の配列:
検索する配列を指定する

inArray()のパラメータに検索する値と検索対象の配列を指定することで、検索対象の配列から検索する値を検索することができます。
検索する値が配列の中から見つかった場合はその値のインデックスを返し、見つからなかった場合は-1を返します。

配列の要素を検索するサンプルコード

配列の要素を検索するサンプルコードを紹介します。

検索した要素が見つかった場合

inArray()で検索した要素が見つかった場合を見てみます。

sample.html

<!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>

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<h2>配列から要素を検索する</h2>

<div>

<p></p>

</div>

</body>

</html>

index.js

let arr = [ "イチゴ", "バナナ", "パイナップル", "リンゴ", "グレープ" ];
$("p:eq(0)").text("イチゴの検索結果: " + $.inArray("イチゴ", arr));
$("p:eq(1)").text("グレープの検索結果: " + $.inArray("グレープ", arr));
$("p:eq(2)").text("バナナの検索結果: " + $.inArray("バナナ", arr));

let arr = [ "イチゴ", "バナナ", "パイナップル", "リンゴ", "グレープ" ];

$("p:eq(0)").text("イチゴの検索結果: " + $.inArray("イチゴ", arr));

$("p:eq(1)").text("グレープの検索結果: " + $.inArray("グレープ", arr));

$("p:eq(2)").text("バナナの検索結果: " + $.inArray("バナナ", arr));

出力結果

検索した要素が見つかった場合、inArray()メソッドは見つかった値のインデックスを返します。

検索した要素が見つからなかった場合

inAraay()で検索した要素が見つからなかった場合を見てみます。

sample.html

<!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>

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<h2>配列から要素を検索する</h2>

<div>

<p></p>

</div>

</body>

</html>

index.js

let arr = [ "イチゴ", "バナナ", "パイナップル", "リンゴ", "グレープ" ];
$("p:eq(0)").text("キウイの検索結果: " + $.inArray("キウイ", arr));
$("p:eq(1)").text("ドリアンの検索結果: " + $.inArray("ドリアン", arr));
$("p:eq(2)").text("マンゴーの検索結果: " + $.inArray("マンゴー", arr));

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

<!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>

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<h2>配列から要素を検索する</h2>

<div>

<p></p>

</div>

</body>

</html>

index.js

let arr = [ "イチゴ", "バナナ", "キウイ", "リンゴ", "マンゴー", "イチゴ", "バナナ", "キウイ"];
$("p:eq(0)").text("イチゴの検索結果: " + $.inArray("イチゴ", arr));
$("p:eq(1)").text("バナナの検索結果: " + $.inArray("バナナ", arr));
$("p:eq(2)").text("キウイの検索結果: " + $.inArray("キウイ", arr));

let arr = [ "イチゴ", "バナナ", "キウイ", "リンゴ", "マンゴー", "イチゴ", "バナナ", "キウイ"];

$("p:eq(0)").text("イチゴの検索結果: " + $.inArray("イチゴ", arr));

$("p:eq(1)").text("バナナの検索結果: " + $.inArray("バナナ", arr));

$("p:eq(2)").text("キウイの検索結果: " + $.inArray("キウイ", arr));

出力結果

検索した要素が複数見つかった場合、inArray()メソッドは最初に見つかった値のインデックスを返します。

多次元配列の要素を検索するサンプルコード

多次元配列の要素を検索するサンプルコードを紹介します。

二次元配列の要素を検索する場合

二次元配列の要素を検索する場合を見てみます。
二次元配列の要素を検索するには、検索対象の配列にインデックスを1つ指定します。

sample.html

<!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>

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<h2>二次元配列から要素を検索する</h2>

<div>

<p></p>

</div>

</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]));

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つ指定することで二次元配列の要素を検索していますね！

そうですね。
検索対象の配列の後ろのインデックスは配列の番号を表しています。
そのため、[0]の場合は[“イチゴ”, “バナナ”]の配列、[1]の場合は[“パイナップル”, “リンゴ”]の配列を表しています。

三次元配列の要素を検索する場合

三次元配列の要素を検索する場合を見てみます。
三次元配列の要素を検索するには、検索対象の配列にインデックスを2つ指定します。

sample.html

<!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>

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<h2>三次元配列から要素を検索する</h2>

<div>

<p></p>

</div>

</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]));

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つ指定することで二次元配列の要素を検索していますね！

そうですね。
三次元配列の場合も同じで検索対象の配列の後ろのインデックスは配列の番号を表しています。
そのため、[0][1]の場合は[“イチゴ”, “バナナ”]の配列、[1][1]の場合は[“pine”, “apple”]の配列を表しています。

今回のポイント

inArray()で配列の要素を検索

⚫︎ inArray()メソッドのパラメータには検索したい値と検索対象の配列を指定する

⚫︎ inArray()メソッドで検索した要素が見つかった場合は検索した値のインデックスを返す

⚫︎ inArray()メソッドで検索した要素が見つからなかった場合は-1を返す

⚫︎ inArray()メソッドで検索した要素が複数見つかった場合は最初に見つかった値のインデックスを返す

⚫︎ 二次元配列の要素を検索するにはinArray()メソッドのパラメータである検索対象の配列にインデックスを1つ指定する

⚫︎ 三次元配列の要素を検索するにはinArray()メソッドのパラメータである検索対象の配列にインデックスを2つ指定する

Writer

株式会社flyhawkのSTです。フライテックメディア事業部でのメディア運営・ライター業務なども担当。愛機はMac Book AirとThinkPad。好きな言語：swift、JS系(Node.js等)。好きなサーバー：AWS。受託開発やプログラミングスクールの運営をしております。ご気軽にお問い合わせください。

【jQuery】alert()を使ってアラートを表示させる！

【jQuery】これで解決！指定した要素を追加する方法の一覧！