jQuery метод .map()

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

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

Обратите внимание, что возвращаемое значение метода .map() является объектом jQuery, чтобы работать с ним как с обычным массивом, вы можете воспользоваться методом .get().

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 - текущий элемент в наборе совпавших элементов.

Параметр

Описание

function(index, element)

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

index - индекс элемента в наборе.
element - текущий элемент в наборе совпавших элементов.

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

<!DOCTYPE html>
<html>
	<head>
		<title>Использование jQuery метода map()</title>
		<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
		<script>
	$( document ).ready(function(){
	  $( "input" ).change(function(){ // запускаем функцию при возникновении события change (изменение элемента)
	    var info = $( "input" ).map(function(){ // вызываем функцию на каждом элементе <input>
	      return $( this ).val(); // возвращаем значение текущего элемента
	    }).get() // преобразуем объект jQuery в обычный массив
	      .join( " / " ); // преобразуем и объединяем все элементы массива в одно строковое значение
	    $( "span" ).html( info ); // устанавливем в качестве содержимого элемента <span> значение переменной
	  })
	  $( "input" ).trigger( "change" ); // вызываем событие change при загрузке документа
	});
		</script>
	</head>
	<body>
		<form>
			<input type="text" name="name" value="Login">
			<input type="password" name="password" value="Password">
		</form>
		<p>Values: <b><span></span></b></p>
	</body>
</html>

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

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

Результат нашего примера:

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

jQuery перемещения