ITコラム

プログラミングノウハウ

2018.11.15

#jQuery入門

jQuery【inArray】配列要素の検索

jQueryのinArrayメソッドは、配列要素の検索を行うメソッドです。
今回は、jQueryのinArrayメソッドの使用方法と、inArrayメソッドを使用したインデックス番号の検索方法について解説いたします。

なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3％で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。

最終更新日：2021年6月24日

1. inArrayメソッド
2. inArrayメソッドでインデックス番号を検索
3. 配列の使用方法
4. まとめ

1. inArrayメソッド

　
inArrayメソッドは、指定した値が配列内に存在すればそのインデックス番号を戻り値として返すメソッドです。

inArrayメソッドは、次のように記述して使用します。

$.inArray( value, array [, fromIndex] );

引数の内容は以下の通りです。

value
検索対象となる値を指定
array
検索対象となる配列を指定
[ fromIndex ]
検索を開始するインデックス番号を指定（指定しない場合はインデックス番号 0 から開始）

▲目次へ戻る

2. inArrayメソッドでインデックス番号を検索

　
inArrayメソッドを使用して、配列要素のインデックス番号を検索します。
各ボタンをクリックしてみて下さい。

配列要素： [“りんご”, “みかん”, “ぶどう”, “メロン”];
　　　　

インデックス番号：

　　
上のサンプルのソースコードは次の通りです。

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function() {

  const ary = ["りんご", "みかん", "ぶどう", "メロン"];

  $("input").on("click", function() {
    $("#spn1").text($.inArray($(this).val(), ary));
  });
});
</script>

<div style="background-color:#CCC; padding:20px 20px 5px;">
  配列要素： ["りんご", "みかん", "ぶどう", "メロン"];
  <input type="button" id="btn1" value="りんご">　<input type="button" id="btn2" value="みかん">　<input type="button" id="btn3" value="ぶどう">　<input type="button" id="btn4" value="メロン">　<input type="button" id="btn5" value="もも" style="color:red;">
  <p>インデックス番号：<span id="spn1" style="color:blue;"></span></p>
</div>

「 $.inArray($(this).val(), ary) 」という記述で、配列変数 ary の中からクリックした input 要素（上のサンプルではボタン）の表示テキストの値を検索して、ヒットしたインデックス番号を取得しています。

$(this) の使用方法についてはjQuery【 this 】便利な $(this) の使い方をご参照下さい。

ももボタンをクリックすると、インデックス番号として「 -1 」が表示されます。
「もも」は配列要素として存在しないため、存在しない場合の戻り値は「 -1 」であることがわかります。

▲目次へ戻る