Этот сайт использует cookies. Продолжение работы с сайтом означает, что Вы согласны!
Изменение коллекции элементов
Библиотека jQuery позволяет не только получать коллекцию элементов, а затем манипулировать ими, но и изменять эту первоначальную коллекцию в любой момент времени. Множество методов предоставляют возможность добавления новых элементов, фильтрации элементов, а также передвижения по дереву DOM. Рассмотрим эти методы подробно.
Добавление и фильтрация элементов
Для добавления и фильтрации элементов коллекции предназначены следующие методы.
add(<Выражение>)
— добавляет элементы в коллекцию. В качестве параметра можно указать HTML-элемент, селектор, коллекцию DOM-элементов или объект jQuery. Возвращает новую коллекцию элементов. Создадим элемент, затем добавим к нему новый HTML-элемент и выведем полученную коллекцию в конец содержимого всех тегов<div>
.
$("<span>Текст</span>").add("<b>Новый элемент</b>")
.appendTo("div");
Найдем коллекцию всех тегов <span>
, добавим к ним элемент с идентификатором div1
, а затем выведем текст во всех элементах коллекции.
$("span").add("#div1").html("Новый текст");
Передадим коллекцию DOM-элементов и объект jQuery.
$("span").add($("div").get()).html("Новый текст"); // DOM
$("span").add($("div")).html("Новый текст"); // jQuery
not(<Параметр>)
— позволяет удалить определенные элементы из коллекции. В качестве параметра может быть указан селектор, DOM-элемент, массив DOM-элементов или объект jQuery. Получим коллекцию всех тегов<div>
, удалим из коллекции элемент с идентификаторомdiv1
, а затем выделим оставшиеся элементы коллекции.
$("div").not("#div1").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");
filter()
— позволяет ограничить коллекцию дополнительным условием. В отличие от методаnot()
, не удаляет элементы, соответствующие селектору, а наоборот, оставляет только их. Метод имеет два формата.
filter(<Селектор>)
filter(<Функция обратного вызова>)
В первом формате метода передается селектор. Для примера выделим элемент с определенным идентификатором.
$("div").filter("#div1").css("background-color", "red");
Второй формат метода позволяет ограничить набор произвольным условием. В параметре <Функция обратного вызова>
указывается ссылка на функцию следующего формата:
function <Название функции>([<Индекс>]) {
// ...
}
Текущий элемент доступен внутри функции через указатель this
. Обратите внимание, указатель this
ссылается на текущий элемент объектной модели документа, а не на элемент коллекции jQuery. Текущий индекс элемента в коллекции доступен через параметр <Индекс>
. Чтобы оставить элемент в наборе, необходимо внутри функции обратного вызова вернуть значение true
. Выделим ссылку с определенным текстом.
$("a").css("color", "silver")
.filter(function() {
if (this.innerHTML == "Ссылка 2") {
return true;
}
}).css("color", "red");
Самоучитель по jQuery Учебник по jQuery 3.5.1 и AJAX в формате PDF
Помощь сайту
Yandex-деньги: 410011140483022
ПАО Сбербанк:
Счет: 40817810855006152256
Реквизиты банка:
Наименование: СЕВЕРО-ЗАПАДНЫЙ БАНК ПАО СБЕРБАНК
Корреспондентский счет: 30101810500000000653
БИК: 044030653
КПП: 784243001
ОКПО: 09171401
ОКОНХ: 96130
Скриншот реквизитов