Метод map()

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

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


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

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

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

$("а").map(function(ind,   elem)    {
if   (ind%2   ==   0)    {
return elem;
}
else   {
return null;
}
}).сss("color",   "red");

Чтобы добавить текущий элемент в новый набор, необходимо вернуть его внутри функции обратного вызова. Добавить можно сразу несколько элементов, вернув их как массив. Если в качестве значения вернуть null, то элемент не будет добавлен в новую коллекцию.
В Листинге 3.1 мы получали URL-адреса всех ссылок в документе с помощью метода each (). Переделаем наш пример и используем для этой цели метод mар ().

var  links   =   $("а").mар(function(){
return  $(this).attr("href");
}).get().join(", ??) ;
$("#div1").text(1inks);

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

Листинг 4.1. Выделение ссылок в зависимости от текста
<html>
<head>
<title>Функция map()</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("a").map(function() {
var txt = $(this).text();
if (txt == "Ссылка 1" || txt == "Ссылка 3") {
return this;
}
else {
return null; // Удаляем элемент
}
}).css("color", "red");
});
</script>
</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>
</body>
</html>

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *