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

Библиотека 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