Руководство jQuery - jQuery.map(array, callback)

Опубликовано admin - вт, 05/01/2018 - 23:40

[Функция] jQuery.map(array, callback)

Раздел "Utilities"

Функция переводит все элементы одного массива в элементы другого массива.

Параметры

jQuery.map(array, callback)

1.0

array:транслируемый массив.

callback: функция исполняемая для каждого элемента. Аргумент функции представляет список элементов. Функция может вернуть любую переменную. Функция "lambda-form" больше не работает. Функция была удалена в версии 1.2.3 для увеличения совместимости с Adobe AIR.

function callback(indexInArray, elementOfArray)
{ 
	var replacementValue;
	this;  // unmapped return replacementValue;
}

Описание

Транслирующая функция, которая обеспечивает данный метод вызывается для каждого элемента в массиве и передаёт два аргумента: индекс массива и элементы подлежащие трансляции. Функция затем может вернуть: транслируемую переменную, 'null' (удалить элемент), или массив переменных - которые распределяются по всему массиву.

Примеры

Пример:

Пара примеров использования функции map()

Пример
Весь код

"jQuery"

    var arr = [ "a", "b", "c", "d", "e" ]
    $("div").text(arr.join(", "));

    arr = jQuery.map(arr, function(n, i){
      return (n.toUpperCase() + i);
    });
    $("p").text(arr.join(", "));

    arr = jQuery.map(arr, function (a) { return a + a; });
    $("span").text(arr.join(", "));

"HTML"

<div></div>
  <p></p>
  <span></span>

"Живой пример jQuery"

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
						"http://www.w3.org/TR/html4/loose.dtd">
	<html>
	<head>
	<link href="http://test-drupal.ru/themes/slyweb/css/jqueryiframe.css" 
	rel="stylesheet" type="text/css"/>
	  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
	<script>
	  $(document).ready(function(){
	
    var arr = [ "a", "b", "c", "d", "e" ]
    $("div").text(arr.join(", "));

    arr = jQuery.map(arr, function(n, i){
      return (n.toUpperCase() + i);
    });
    $("p").text(arr.join(", "));

    arr = jQuery.map(arr, function (a) { return a + a; });
    $("span").text(arr.join(", "));

	  });
	</script>

	</head>
	<body class="iframe">

	
<div></div>
  <p></p>
  <span></span>


	</body>
	</html>

Пример:

Отобразить исходный массив в новом массиве и добавить 4 к каждому значению массива.

"jQuery"

jQuery.map( [0,1,2], function(n){
   return n + 4;
 });

Пример:

Отобразить исходный массив в новом массиве и добавить 1 к каждому значению массива, если значение массива больше чем ноль, остальные значения удалить.

"jQuery"

jQuery.map( [0,1,2], function(n){
   return n > 0 ? n + 1 : null;
 });

Пример:

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

"jQuery"

jQuery.map( [0,1,2], function(n){
   return [ n, n + 1 ];
 });

Пример:

Отобразить исходный массив в новом массиве, каждый элемент возвести в квадрат.

"jQuery"

jQuery.map( [0,1,2,3], function (a) { return a * a; } );

Метод появился в jQuery 1.0 (http://api.jquery.com/jQuery.map/)

Версия jQuery 1.4.2 Документ создан 2010-08-21

Руководство по jQuery!

Плагины jQuery UI

Эффекты