Изменение коллекции элементов

Библиотека 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 Учебник по jQuery 3.5.1 и AJAX в формате PDF

Помощь сайту

Yandex-деньги: 410011140483022

ПАО Сбербанк:
Счет: 40817810855006152256
Реквизиты банка:
Наименование: СЕВЕРО-ЗАПАДНЫЙ БАНК ПАО СБЕРБАНК
Корреспондентский счет: 30101810500000000653
БИК: 044030653
КПП: 784243001
ОКПО: 09171401
ОКОНХ: 96130
Скриншот реквизитов

Поиск по сайту в Яндексе