Оглавление

4.3. Метод map()

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

 

В параметре <Функция обратного вызова> указывается ссылка на функцию следующего формата.
function <Название функции>([<Индекс>[, <ООМ-элемент>]]) {
// ...

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

 


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

 

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


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


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

 
Листинг 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.

 

 

 

Ссылка 1
Ссылка 2
Ссылка 3
Ссылка 4

 

<< Меню >>  
Комментарии принадлежат их авторам. Мы не несем ответственности за их содержание.
Отправитель Нити