Понедельник, 13.05.2024, 21:42
Главная | Вход | RSS
Меню сайта
Категории раздела
JQuery плагины [59]
JQuery уроки [69]
PHP полезное [24]
PHP уроки [21]
Css [26]
JS [3]
SQL [9]
Css 3 [17]
Статистика
Онлайн всего: 1
Гостей: 1
Пользователей: 0
Главная » Статьи » JQuery уроки
jQuery.map()

Описание: Переводит все элементы массива или массиво-подобного объекта в другой массив элементов.

jQuery.map( массив, callback(элементМассива, индексВМассиве) )

Добавлена в версию: 1.0
массив
Массив
Массив для перевода.
callback(элементМассива, индексВМассиве)
Любое значение
Функция для обработки каждого элемента. Первый аргумент функции является элементом, а второй аргумент - индексом. Функция может вернуть любое значение. this будет глобальным объектом окна.

jQuery.map( массивИлиОбъект, callback( значение, индексИлиКлюч ) )

Добавлена в версию: 1.6
массивИлиОбъект
Массив, Объект
Массив или объект для перевода.
callback( значение, индексИлиКлюч )
Функция
Функция для обработки каждого пункта. Первым аргументом функции является значение; вторым аргументом является индекс или ключ массива или свойство объекта. Функция может вернуть любое значение, чтобы добавить к массиву. Возвращаемый массив будет сводятся в результирующий массив. В функции, это относится к глобальному (окно) объекту.

Метод $.map() применяет функцию к каждому элементу массива, собирая результат в новом массиве. До jQuery 1.6, $.map() поддерживала перевод только массивов. Начиная с jQuery 1.6 она также переводит объекты.

Массиво-подобные объекты - те, со свойством .length и значением индекса .length - 1 — должны быть преобразованы в фактические массивы перед передачей $.map(). Библиотека jQuery представляет $.makeArray() для такого переоборудования.

Функция перевода, которая предоставляется в этот метод вызывается для каждого элемента верхнего уровня в массиве и передает два аргумента: значение элемента и его индекс или ключ внутри массива или объекта.

Функция может возвратить:

  • переведенное значение, которое будет отображаться в массиве результата
  • null, для удаления элемента
  • массив значений, который будет помещен в полный массив

Примеры

Пример 1

Парочка примеров использования .map() 
 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(", "));

Пример 2

Трансформирует исходный массив в новый добавляя при этом 4 к каждому значению. 
$.map( [0,1,2], function(n){
 return n + 4;
});
Результат выполнения кода выше:
[4, 5, 6]

Пример 3

Трансформирует исходный массив в новый добавляя при этом 1 к каждому значению, которое больше 0 (иначе значение удаляется). 
$.map( [0,1,2], function(n){
 return n > 0 ? n + 1 : null;
});
Результат выполнения кода выше:
[2, 3]

Пример 4

Трансформирует исходный массив в новый. В новом массиве совместно содержатся старые значения и они же увеличенные на единицу. 
$.map( [0,1,2], function(n){
 return [ n, n + 1 ];
});
Результат выполнения кода выше:
[0, 1, 1, 2, 2, 3]

Пример 5

Трансформирует исходный массив в новый. В новом массиве все значения возведены в квадрат. 
$.map( [0,1,2,3], function (a) { return a * a; } );
Результат выполнения кода выше:
[0, 1, 4, 9]

Пример 6

Удаляет элементы возвращая null из функции. Удаляет любые цифры меньшие, чем 50, а остальные уменьшает на 45. 
$.map( [0, 1, 52, 97], function (a) { return (a > 50 ? a - 45 : null); } );
Результат выполнения кода выше:
[7, 52]

Пример 7

Для увеличения массива результата, возвращается массив внутри функции. 
var array = [0, 1, 52, 97];
array = $.map(array, function(a, index) {
 return [a - 45, index];
});
Результат выполнения кода выше:
[-45, 0, -44, 1, 7, 2, 52, 3]

Пример 8

Переводит карту исходного объекта в новый массив и удваивает каждое значение. 

var dimensions = { width: 10, height: 15, length: 20 };
dimensions = $.map( dimensions, function( value, index ) {
  return value * 2;
});
Результат выполнения кода выше:
[20, 30, 40]

Пример 9

Переводит карту ключей объекта в массив 

var dimensions = { width: 10, height: 15, length: 20 },
    keys = $.map( dimensions, function( value, index ) {
      return index;
    });
Результат выполнения кода выше:
["width", "height", "length"]
Категория: JQuery уроки | Добавил: ChronoW (16.04.2013)
Просмотров: 1216 | Теги: map(), jQuery.map(), ойгукн, jQuery, jQuery map, jQuery map() | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email *:
Код *: