Этот сайт использует cookies. Продолжение работы с сайтом означает, что Вы согласны!
Метод 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».
Реквизиты
ЮMoney: 410011140483022
ПАО Сбербанк:
Счет: 40817810855006152256
Реквизиты банка:
Наименование: СЕВЕРО-ЗАПАДНЫЙ БАНК ПАО СБЕРБАНК
Корреспондентский счет: 30101810500000000653
БИК: 044030653
КПП: 784243001
ОКПО: 09171401
ОКОНХ: 96130
Скриншот реквизитов