jQuery метод .map()

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

jQuery метод .map() передает функции каждый элемент в текущем наборе совпавших элементов, создавая при этом новый объект jQuery, который содержит возвращаемые значения этой функции.

jQuery синтаксис:

Синтаксис 1.2:

Код
$( selector ).map( function( index, element ))

selector - Selector

function - Function

index - Integer

element - Element элемент DOM

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

1.2

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

Параметр Описание
function(index, element) Функция, которая будет вызываться для каждого элемента в текущем наборе совпавших элементов. Внутри функции this ссылается на текущий элемент в наборе.
Функция принимает следующие параметры:
  • index - индекс элемента в наборе.
  • element - текущий элемент в наборе совпавших элементов.

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

Пример использования jQuery метода map()

Нажмите ▶, затем выполните действие из пояснения. Измените JavaScript и запустите пример ещё раз. В редакторе используется jQuery 4.0.0.

index.html
HTML
<form>
  <input type="text" name="name" value="Login" />
  <input type="password" name="password" value="Password" />
</form>
<p>
  Values: <b><span></span></b>
</p>
main.js
JavaScript
$(document).ready(function () {
    $('input').change(function () {
        var info = $('input')
            .map(function () {
                return $(this).val()
            })
            .get()
            .join(' / ')
        $('span').html(info)
    })
    $('input').trigger('change')
})

В этом примере мы разместили два элемента <input>, первый предназначен для ввода пароля, второй для ввода пароля. При загрузке документа с помощью метода trigger() мы вызываем событие "change" (изменение элемента), обработчик этого события запускает функцию, которая с помощью метода .map() возвращает значение каждого элемента <input> в документе, полученного с помощью метода .val().

После этого с помощью метода .get() мы преобразуем объект jQuery в обычный массив, это необходимо для того, чтобы вызвать нативный JavaScript метод join(), который позволяет преобразовать и объединить все элементы массива в одно строковое значение. И наконец, с помощью метода .html() устанавливем в качестве содержимого элемента <span>значение нашей переменной