jQueryのinArrayメソッドは、配列要素の検索を行うメソッドです。
今回は、jQueryのinArrayメソッドの使用方法と、inArrayメソッドを使用したインデックス番号の検索方法について解説いたします。
なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3%で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。
最終更新日:2021年6月24日
inArrayメソッドは、指定した値が配列内に存在すれば そのインデックス番号を戻り値として返すメソッドです。
inArrayメソッドは、 次のように記述して使用します。
$.inArray( value, array [, fromIndex] );
引数の内容は以下の通りです。
value |
---|
検索対象となる値を指定 |
array |
検索対象となる配列を指定 |
[ fromIndex ] |
検索を開始するインデックス番号を指定 (指定しない場合はインデックス番号 0 から開始) |
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 」であることがわかります。
配列自体の詳しい使用方法を知りたい方は、JavaScript の配列に関する記事をまとめましたので、ご参照下さい。
jQueryのinArray配列について、いかがでしたでしょうか。
「Webプログラマになりたいけど、独力では限界がある」と感じている方には、「プログラマカレッジ」がおすすめです。
「プログラマカレッジ」は本気でプログラマを目指す方のための、就職支援付き、受講料無料のプログラミングスクールです。
今回ご紹介した「jQuery」を含む豊富なカリキュラムで、IT初心者からWebプログラマとして就職するまで、プロが完全にサポートします。本気でプログラマとして就職・転職したいという方は、一度のぞいてみてはいかがでしょうか。
INTERNOUS,inc. All rights reserved.