jQuery indexof()メソッド

この記事では、jQuery の indexOf 機能に取り組みます。この機能は、指定された要素または文字列内の指定された要素または文字の位置を返します。

jQuery で indexOf メソッドを使用する

jQuery 配列関数 indexOf() は、指定された要素または指定された配列内の検索値の最初の出現のインデックスを返すために使用されます。jQuery 配列関数 indexOf() は組み込みの jQuery 関数です。

jQuery 配列 indexOf() 関数は、指定された配列内の指定された検索値/要素を検索します。値/要素が見つかった場合は、要素の最初の出現を左から整数値として返し、要素が配列に見つからない場合は -1 を返します。

要素の検索は、指定されたインデックスまたは位置から開始することもできます。開始インデックスが指定されていない場合、検索は最初から開始され、デフォルトではインデックス 0 になります。

最後に検索を開始するには、jQuery の lastIndexOf() 関数を使用できます。

構文：

array.indexOf(searchValue, initPosition);

1. searchValue は必須パラメーターです。配列で検索する searchValue を示します。
2. initPosition はオプションのパラメータです。要素の検索を開始するインデックス値を示します。

指定された要素のインデックス値は、この関数の出力として返されます。簡単な例で理解しましょう。

コード-HTML：

<select id="index">
  <option>Japanese</option>
  <option>English</option>
  <option>Hindi</option>
  <option>French</option>
  <option>Telugu</option>
</select>

コード-JavaScript+jQuery：

const languages = [ "English", "Hindi", "Japanese", "Marathi", "French" ];
$('#index').on('change', () => {
    console.log(languages.indexOf($('#index').val(), 0))
});

上記の例では、すでに languages をランダムな順序で定義しており、ユーザーが言語の 1つを選択すると、既存の配列でその言語のインデックスを見つけようとします。これは、このデータが動的に受信される場合に最も役立ちます。

jQuery をサポートするブラウザでコードスニペットを実行してみてください。ヒンディー語またはフランス語をそれぞれ選択すると、以下の結果が表示されます。

出力：

1
4

デモコードを実行