Приднестровская поддержка XOOPS
Метод 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.
Отправитель | Нити |
---|
4 пользователь(ей) активно (1 пользователь(ей) просматривают Инструкции)
Участников: 0 Гостей: 4 далее... |