Добавление и фильтрация элементов
Итак, мы уже довольно многое узнали о jQuery . В этом разделе мы познакомимся с тем, как изменять коллекцию элементов в jQuery.
Библиотека jQuery позволяет не только получать коллекцию элементов, а
затем манипулировать ими, но и изменять эту первоначальную коллекцию в
любой момент времени. Множество методов предоставляют возможность
добавления новых элементов, фильтрации элементов, а также передвижения
по дереву DOM. Рассмотрим эти методы подробно.
Для добавления и фильтрации элементов коллекции предназначены следующие методы.
1) add ( Выражение) — добавляет элементы в коллекцию. В качестве
параметра можно указать HTML-элемент, селектор, коллекцию DOM-элементов
или объект jQuery. Возвращает новую коллекцию элементов. Создадим
элемент, затем добавим к нему новый HTML-элемент и выведем полученную
коллекцию в конец содержимого всех тегов div.
$ ("<span>Teкст</span>") .add("<b>Новый элемент</b>") .appendTo("div");
Найдем коллекцию всех тегов span, добавим к ним элемент с
идентификатором divl, а затем выведем текст во всех элементах коллекции.
$("span").add("#divl").html("Новый текст");
Передадим коллекцию DOM-элементов и объект jQuery.
$("span").add($("div").get()).html("Новый текст"); // DOM
$("span") .add($("div")) .html("Новый текст"); // jQuery
2) not (Параметр) — позволяет удалить определенные элементы из
коллекции. В качестве параметра может быть указан селектор, DOM-элемент,
массив DOM-элементов или объект jQuery. Получим коллекцию всех тегов
div, удалим из коллекции элемент с идентификатором divl, а затем выделим
оставшиеся элементы коллекции.
$("div").not("#divl").css("background-color", "red");
Удалим из коллекции первый элемент, передав в качестве параметра DOM-элемент.
$("div").not($("div:first").get(0)) .css("background-color", "red");
Теперь исключим из коллекции все четные элементы, передав массив DOM-элементов.
$("div") .not ($ ("div:even") .get () ) .css("background-color", "red");
Такого же результата можно достичь, если передать объект jQuery.
$ ("div") .not ($ ("div:even") ) .css("background-color", "red");
3) filter () — позволяет ограничить коллекцию дополнительным
условием. В отличие от метода not (), не удаляет элементы,
соответствующие селектору, а наоборот, оставляет только их. Метод имеет
два формата.
filter(Селектор)
filter(Функция обратного вызова)
В первом формате метода передается селектор. Для примера выделим элемент с определенным идентификатором.
$("div").filter("#divl").css("background-color", "red");
Второй формат метода позволяет ограничить набор произвольным
условием. В параметре Функция обратного вызова указывается ссылка на
функцию следующего формата.
function <Название функции>([<Индекс>] ) {...}
Текущий элемент доступен внутри функции через указатель this.
Обратите внимание, указатель this ссылается на текущий элемент объектной
модели документа, а не на элемент коллекции jQuery. Текущий индекс
элемента в коллекции доступен через параметр Индекс. Чтобы оставить
элемент в наборе, необходимо в функции обратного вызова вернуть значение
true. Выделим ссылку с определенным текстом.
$("а") .css("color", "silver")
.filter(function() {
if (this.innerHTML == "Ссылка 2") {
return true;
}
}).css("color", "red");
Привязка поиска к другим элементам
Привязать поиск элемента к другим элементам HTML-документа можно с помощью следующих методов.
1) find (Селектор) — находит элементы, которые располагаются внутри
контейнера. Возвращает новую коллекцию. Найдем все теги div, затем
внутри них все теги span и изменим текст внутри этих тегов.
$("div").find("span").html("Новый текст");
<div>
<u><span>TeKCT l</span></u> <span>TeKCT 2</span>
</div>
2) children( [Селектор] ) — возвращает все дочерние узлы. Выделим все элементы внутри тегов div.
$("div").children().css("color", "red");
<div>
<u><b>Выделенный</b> текст l</u>
<b>Текст 2</b>
</div>
В результате будет выделен текст, который расположен между тегами u и b.
Если в качестве необязательного параметра указать селектор, то будут возвращены дочерние узлы, которые соответствуют селектору.
$("div").children("b").css("color", "red");
<div>
<u><b>Выделенный</b> текст l</u>
<b>Текст 2</b>
</div>
В этом примере будет выделен только фрагмент Текст 2, так как второй тег b расположен внутри тега u.
3) parent ( [Селектор] ) — находит контейнер, в который вложен
элемент. Получим любые теги, в которые вложены теги span, и выведем
новый текст вместо их содержимого.
$("span").parent().html("Это элемент-родитель");
<div><span>текст</span></div>
<b><span>текст</span></b>
<b><u>текст</u></b>
Результат:
<div>Этo элемент-родитель</div > <b>Это элемент-родитель</b> <b><u>текст</u></b>
Если в качестве необязательного параметра указать селектор, то будут
возвращены узлы, которые ему соответствуют. Найдем все теги div, в
которые вложены теги span, и выведем новый текст вместо их содержимого.
$("span").parent("div").html("Это элемент-родитель");
<div><span> Текст </span></div>
<b><span> Текст </span></b>
<b><u>Текст</u></b>
Результат будет выглядеть следующим образом.
<div>Это элемент-родитель</М^>
<b><span> Текст </span></b>
<b><u>Текст</u></b>
При щелчке на кнопке отобразим скрытый элемент, который находится в одном контейнере с ней, а затем удалим эту кнопку.
$(":button").click(function() {
$(this) // Находим элемент .parent() // Получаем элемент-родитель
.find("span:first") // Находим первый тег
.show() // Отображаем его
.end() // Возвращаемся к элементу-родителю
.find(":button:first") // Находим внутри него первую кнопку
.remove(); // Удаляем кнопку
});
<div>
<input type="button" value="Показать описание"> Термин l<br>
<span style="display:none">Описание термина l</span> </div> <div>
<input type="button" value="Показать описание"> Термин 2<br>
<span style="display:none">Описание термина 2</span> </div>
4) closest {Селектор) — возвращает ближайший родительский элемент, который соответствует селектору.
$("#spanl").closest("div").html("Это элемент-родитель");
<div><div><b>
<span id="spanl">Текст</sраn> </b></div></div>
Результат:
<div><div>Это элемент-родитель</с11у></с11у>
5) parents ( [Селектор] ) — возвращает все контейнеры, в которые
вложен элемент. Если в качестве необязательного параметра указать
селектор, то будут возвращены узлы, которые ему соответствуют. Получим
все теги, в которые вложен элемент с идентификатором spanl, и выведем их
названия.
var elem = $("#divl");
$("#spanl").parents().each(function() {
elem.append(this.tagName + " ");
});
<div><u><b>
<span id="spanl">Текст</sраn>
</b></u></div>
<div id="divl" ></div>
Результат:
b u div
6) siblings ( [Селектор] ) — находит все узлы, которые расположены до
или после элемента на одном уровне вложенности. Если в качестве
необязательного параметра указать селектор, то будут возвращены узлы,
которые ему соответствуют.
$("div").siblings("а").css("color", "red");
<a href =" linkl. html" >Ссылка l</a><br>
<span> Текст </span><br> <div> Текст </div>
<span> Текст </span><br>
<a href ="link2 .html" >Ссылка 2</a><br>
<span><a href =" link3 . html" >Ссылка 3</a></span><br>
<a href =" link4 . html" >Ссылка 4</a><br>
Цвет текста ссылки станет красным, если тег а следует до или после
тега div. В этом примере ссылки 1, 2 и 4 станут красного цвета. Ссылка 3
не станет красного цвета, так как расположена внутри тега span.
7) next ( [Селектор] ) — находит узел, который является соседним для
элемента и следует сразу после него. Если в качестве необязательного
параметра указать селектор, то будут возвращены узлы, которые ему
соответствуют. Выделим содержимое тега, который следует сразу за
элементом с идентификатором spanl.
$("#spanl") .next() .css("color", "red") ;
<span id="spanl"> Текст </span>
<b>Текст1</b>
<u><b>Текст2</b></u>
В результате будет выделен фрагмент Текст 1.
8) next All ( [Селектор] ) — возвращает все узлы, которые следуют
после элемента на том же уровне вложенности. Если в качестве
необязательного параметра указать селектор, то будут возвращены узлы,
которые ему соответствуют. Получим все названия тегов, которые следуют
после элемента с идентификатором spanl.
var elem = $("#divl");
$ ("#spanl") .nextAlK) . each (function () {
elem.append(this.tagName + " ");
});
<span id="spanl">TeKCT</span>
<b>Текст</b> <u><b>Текст</b></u>
<div id="divl" ></div>
Результат:
b u div
Обратите внимание: мы не получили второй тег b, так как он расположен внутри тега u.
9) prev( [Селектор] ) — находит узел, который является соседним для
элемента и находится сразу перед ним. Если в качестве необязательного
параметра указать селектор, то будут возвращены узлы, которые ему
соответствуют. Выделим содержимое тега, который находится перед
элементом с идентификатором spanl.
$(M#spanl").prev().css("color", "red");
<u><b>Текст2</b></u>
<b>Текст1</b>
<span id="spanl">Текст</sраn>
В результате будет выделен фрагмент Текст 1.
10) prevAll ( [Селектор] ) — возвращает все узлы, которые находятся
перед элементом на том же уровне вложенности. Если в качестве
необязательного параметра указать селектор, то будут возвращены узлы,
которые ему соответствуют. Получим все названия тегов, которые находятся
перед элементом с идентификатором spanl.
var elem =. $(n#divlM);
$("#spanl") .prevAHO . each (function () {
elem. append (this . tagName + 11 ");
});
<u><b>Текст2</b></u>
<b>Текст1</b>
<span id="spanl"> Текст </span>
<div id="divl" ></div>
Результат:
b u
Обратите внимание: мы не получили первый тег b, так как он расположен внутри тега u.
11) contents () — находит дочерние узлы (включая текстовые) в
коллекции элементов или в содержимом документа, если он представляет
собой фрейм. Переместим все текстовые узлы в конец элемента с
идентификатором divl.
$(HdivH).contents().not(M[nodeType=l]").appendTo("#divl");
<div>Текстовый узел1 <b>узел элемента</b>
Текстовый узел2<"^гу>
<div id="divl"></div>
12) andSelf () — объединяет предыдущую коллекцию с новой. $("div") .children ("а") // Объединяем коллекцию тегов
// с коллекцией тегов <а>, являющихся // дочерними элементами тегов
.andSelf() .css({Mborder-styleM: "dotted", margin: "20px"});
Ссылка l
Ссылка 2
Ссылка 3
Ссылка 4
В этом примере содержимое тега div, а также ссылки 1, 2 и 4 будут
обведены пунктирной рамкой. Ссылка 3 не будет обведена, так как
расположена внутри те-га span.
13) end () — позволяет вернуться к предыдущей коллекции. В качестве
примера получим коллекцию всех тегов div, внутри которой найдем элемент с
идентификатором spanl и выведем в нем соответствующий текст. Затем
вернемся к предыдущей коллекции всех тегов div, в которой найдем элемент
с идентификатором span2 и также выведем в нем соответствующий текст.
$("div")
//Находим элемент с id="spanl"
.find("#spanl").html("Это spanl")
// Возвращаемся на предыдущую коллекцию
.end()
//Находим элемент с id="span2"
.find("#span2").html("Это span2");
14) is (Селектор) — проверяет коллекцию или элемент на соответствие
селектору. В качестве параметра нельзя указывать сложносоставные
селекторы (например, условия +, ~, и больше). Возвращает true, если
элемент соответствует селектору, и false— в противном случае. Выведем
подтверждающее сообщение, если элемент с идентификатором linkl
расположен внутри тега div, а в противном случае — название тега, в
который вложен элемент.
var elem = $("#linkl").parent();
if (elem.is("div")) {
alert("Элемент вложен в тег <div>");
}
else {
alert("Элемент вложен в тег " + elem[0].tagName);
}
Метод map()
Метод map () позволяет создать новую коллекцию элементов jQuery на
основе имеющегося набора. Имеет следующий синтаксис. mаp{Функция
обратного вызова);
В параметре Функция обратного вызова указывается ссылка на функцию следующего формата.
function Название функции ( [Индекс [, BОМ-элемент] ] ) {
// ...
}
Текущий элемент доступен внутри функции через указатель this.
Обратите внимание, указатель this ссылается на текущий элемент объектной
модели документа, а не на элемент коллекции jQuery. Если в параметре
ВОМ-элемент указана переменная, то текущий элемент также будет доступен
через эту переменную. Текущий индекс элемента в коллекции доступен через
параметр Индекc. Выделим все четные ссылки в документе.
$("а").map(function(ind, elem) {
if (ind%2 == 0) {
return elem;
}
else {
return null;
}
}).css("color", "red");
Чтобы добавить текущий элемент в новый набор, необходимо вернуть его
внутри функции обратного вызова. Добавить можно сразу несколько
элементов, вернув их как массив. Если в качестве значения вернуть null,
то элемент не будет добавлен в новую коллекцию.
В листинге 3.1 мы получали URL-адреса всех ссылок в документе с
помощью метода each (). Переделаем наш пример и используем для этой цели
метод mар () .
var links = $("а").тар(function(){
return $(this).attr("href"); }).get().join(",");
$(»#divl").text(1inks);
Как видно из примера, мы можем создавать коллекцию не только
элементов, но и значений. Преобразовать эту коллекцию в обычный массив
позволяет метод get (). С помощью метода JavaScript join() преобразуем
массив в строку, где все элементы массива будут перечислены через
запятую.
В качестве еще одного примера использования метода mар () выделим все ссылки с определенным текстом (листинг 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.
|