jQuery функция $.inArray()

Определение и применение

jQuery функция $.inArray() производит поиск переданного значения в массиве и возвращает его индекс при нахождении, или значение -1, если не найден.

Функция $.inArray() схожа с нативным методом JavaScript indexOf() объекта Array, который по аналогии возвращает -1, когда он не находит совпадение.

jQuery синтаксис:

Синтаксис 1.2:

JavaScript

$.inArray( value, arr );
$.inArray( value, arr, fromIndex )

value - Anything

arr - Array

fromIndex - Number

Добавлен в версии jQuery

1.2

Значения параметров

Параметр	Описание
value	Значение, которое требуется найти внутри массива. Обязательное значение.
arr	Массив в котором происходит поиск необходимого значения.
fromIndex	Индекс массива с которого начинается поиск. Значение по умолчанию равно 0 (поиск осуществляется по всему массиву). Допускается использование отрицательных значений, в этом случае индекс с которого будет произведено сравнение элементов будет расчитан по следующей формуле: `length` (длина массива) + `fromIndex.` Необязательный аргумент.

Пример использования

Функция $.inArray() — пример 1

Нажмите ▶. Измените JavaScript и запустите пример повторно. Используется jQuery 3.1.1.

index.html

HTML

<p>Результат выполнения выводится в консоль под примером.</p>

main.js

JavaScript

const arr = [1, 2, 3, 'a', 'b', 'c'] // инициализируем переменную, содержащую массив
console.log($.inArray('a', arr)) // возвращаемое значение 3
console.log($.inArray('d', arr)) // возвращаемое значение -1 (значение не найдено в массиве)
console.log($.inArray('b', arr, 3)) // возвращаемое значение 4
console.log($.inArray(2, arr, 2)) // возвращаемое значение -1 (значение не найдено в массиве)
console.log($.inArray(1, arr, -6)) // возвращаемое значение 0
console.log($.inArray(1, arr, -5)) // возвращаемое значение -1 (значение не найдено в массиве)

style.css

CSS

body {
  margin: 16px;
  font:
    16px/1.5 system-ui,
    sans-serif;
  overflow-wrap: anywhere;
}
img,
input,
select,
textarea,
button {
  max-width: 100%;
}

В следующем примере мы рассмотрим с Вами как продолжить поиск искомого элемента в массиве после первого и последующих совпадений, вплоть до конца массива. Это позволит нам сравнить все элементы массива по определенному индексу на предмет наличия искомого элемента:

Функция $.inArray() — пример 2

Нажмите ▶. Измените JavaScript и запустите пример повторно. Используется jQuery 3.1.1.

index.html

HTML

<p>Результат выполнения выводится в консоль под примером.</p>

main.js

JavaScript

let indexes = [] // инициализируем переменную, содержащую пустой массив
const myArray = ['z', 'v', 'z', 'v', 'z', 'v'] // инициализируем переменную, содержащую массив строковых значений по которому будет произведен поиск
const searchElement = 'z' // инициализируем строковую переменную (значение переменной будем искать внутри массива myArray)
let index = $.inArray(searchElement, myArray) // инициализируем переменную, содержащую индекс первого искомого элемента (значение переменной searchElement) внутри массива myArray

while (index != -1) {
    // пока значение переменной index не будет равно -1
    indexes.push(index) // с использованием метода push() добавляем в переменную indexes значение переменной index
    index = $.inArray(searchElement, myArray, index + 1) // изменяем значение переменной путем поиска необходимого элемента далее в массиве (если найден - индекс элемента, если нет то -1)
}

console.log(indexes) // переменная содержит значение [0, 2, 4]

style.css

CSS

body {
  margin: 16px;
  font:
    16px/1.5 system-ui,
    sans-serif;
  overflow-wrap: anywhere;
}
img,
input,
select,
textarea,
button {
  max-width: 100%;
}

Обратите внимание на то, что если вы ищете внутри массива NaN (Not a number - не число), независимо от наличия этого значения в массиве возвращаемое значение будет -1. Это поведение метода учтено в нативном методе includes(), добавленном в ECMAScript 2016, он решает подобную задачу, но возвращает логическое значение:

Функция $.inArray() — пример 3

Нажмите ▶. Измените JavaScript и запустите пример повторно. Используется jQuery 3.1.1.

index.html

HTML

<p>Результат выполнения выводится в консоль под примером.</p>

main.js

JavaScript

const arr = [NaN] // инициализируем переменную, содержащую одно значение NaN

console.log(arr.indexOf(NaN)) // возвращаемое значение -1 (элемент не найден)
console.log($.inArray(NaN, arr)) // возвращаемое значение -1 (элемент не найден)

arr.includes(NaN) // возвращаемое значение true (элемент найден)

style.css

CSS

body {
  margin: 16px;
  font:
    16px/1.5 system-ui,
    sans-serif;
  overflow-wrap: anywhere;
}
img,
input,
select,
textarea,
button {
  max-width: 100%;
}