cpp

Метод map()

Метод map() позволяет создать новую коллекцию элементов jQuery на основе имеющегося набора. Имеет следующий синтаксис:

map(<Функция обратного вызова>)

В параметре <Функция обратного вызова> указывается ссылка на функцию следующего формата:

function <Название функции>([<Индекс>[, <DOM-элемент>]]) {
   // ...
}

Текущий элемент доступен внутри функции через указатель this. Обратите внимание: указатель this ссылается на текущий элемент объектной модели документа, а не на элемент коллекции jQuery. Если в параметре <DOM-элемент> указана переменная, то текущий элемент также будет доступен через эту переменную. Текущий индекс элемента в коллекции доступен через параметр <Индекс>. Выделим все ссылки с четным индексом в документе:

$('a').map( function(i, elem) {
   if (i % 2 === 0) {
      return elem;
   }
   else {
      return null;
   }
}).css('color', 'red');

Чтобы добавить текущий элемент в новый набор, необходимо вернуть его внутри функции обратного вызова. Добавить можно сразу несколько элементов, вернув их как массив. Если в качестве значения вернуть null или undefined, то элемент не будет добавлен в новую коллекцию.

В листинге 1.4 мы получали URL-адреса всех ссылок в документе с помощью метода each(). Переделаем наш пример и используем для этой цели метод map():

$(function() {
   var links = $('a').map( function() {
      return $(this).attr('href');
   }).get().join(',');
   $('#log').text(links);
});

Как видно из примера, мы можем создавать коллекцию не только элементов, но и значений. Преобразовать эту коллекцию в обычный массив позволяет метод get(). С помощью метода JavaScript join() преобразуем массив в строку, где все элементы массива будут перечислены через запятую.

В качестве еще одного примера использования метода map() выделим все ссылки с определенным текстом (листинг 1.5).

Листинг 1.5. Выделение ссылок в зависимости от текста

<!doctype html>
<html lang="ru">
<head>
   <meta charset="utf-8">
   <title>Функция map()</title>
</head>
<body>
   <a href="link1.html">Ссылка 1</a><br>
   <a href="link2.html">Ссылка 2</a><br>
   <a href="link3.html">Ссылка 3</a><br>
   <a href="link4.html">Ссылка 4</a>

<script src="js/jquery.min.js"></script>
<script>
$(function() {
   $('a').map( function() {
      var txt = $(this).text();
      if (txt === 'Ссылка 1' || txt === 'Ссылка 3') {
         return this;
      }
      else {
         return null; // Удаляем элемент
      }
   }).css('color', 'red');
});
</script>
</body>
</html>

В этом примере будут выделены все ссылки, содержащие текст «Ссылка 1» и «Ссылка 3».

Учебник по jQuery и AJAX
Учебник по jQuery и AJAX в формате PDF

Реквизиты

ЮMoney: 410011140483022

ПАО Сбербанк:
Счет: 40817810855006152256
Реквизиты банка:
Наименование: СЕВЕРО-ЗАПАДНЫЙ БАНК ПАО СБЕРБАНК
Корреспондентский счет: 30101810500000000653
БИК: 044030653
КПП: 784243001
ОКПО: 09171401
ОКОНХ: 96130
Скриншот реквизитов

cpp