ITコラム

jquery inArray 配列

jQuery

2018.11.15

jQuery【 inArray 】配列要素の検索

jQuery の inArray メソッドは、配列要素の検索を行うメソッドです。
今回は、jQuery の inArray メソッドの使用方法について紹介します。

尚、配列自体の使用方法に関しては、JavaScript の 配列に関する以下の記事もご参照下さい。
JavaScript【 array 】1 ~ 配列という便利なデータ構造
JavaScript【 array 】2 ~ 要素の追加と削除
JavaScript【 array 】3 ~ 多次元配列
JavaScript【 array 】4 ~ 連想配列とfor..in文
JavaScript【 array 】5 ~ 配列のソート
JavaScript【 array 】6 ~ indexOfで配列の要素を検索
JavaScript【 array 】7 ~ 配列の連結
JavaScript【 array 】8 ~ 配列のコピー
JavaScript【 array 】9 ~ 配列の比較
JavaScript【 array 】10 ~ 配列からランダムに値を取得
JavaScript【 array 】11 ~ 配列のpushとpop
JavaScript【 array 】12 ~ 配列の重複チェック

目次

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

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() {

  var 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 」であることがわかります。

▲目次へ戻る

SHARE

最新記事

IMG_004

卒業生インタビュー

2019.08.20

【卒業生の声:渡邉さん】宮城の大学とプログラマカレッジへ通学を両立!限られた時間を有効活用し、希望するWEB系の会社へ内定。

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 某WEB系会社 プログラマカレッジ卒業生の渡邉さんにお話しをお伺いしました! 目次 新卒採用の切符を捨て、アイデアを形にできる仕事を目指す 質問が […]

続きを見る

DSC_3661

卒業生インタビュー

2019.08.16

【卒業生の声:前田さん】大学中退の未経験エンジニアが4社から内定獲得!初めての就活を成功させた秘訣とは?

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 株式会社リヴァンプ プログラマカレッジ卒業生のマエダさん(23歳)にお話しをお伺いしました! 目次 勉強に興味が持てなくて大学中退 就職できるか不 […]

続きを見る

DSC_0077

卒業生インタビュー

2019.08.08

【卒業生の声:オチアイさん】高校教師からプログラマーへ転身!最初の2ヶ月は理解に苦しむ日々。楽しめるまでに至った秘訣とは?

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 プライムソリューションズ株式会社 プログラマカレッジ卒業生のオチアイさんにお話しをお伺いしました! 目次 大学院卒業後は高校教師に そこから思い切 […]

続きを見る

無料相談する

INTERNOUS,inc. All rights reserved.