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

Библиотека jQuery позволяет не только получать коллекцию элементов, а затем манипулировать ими, но и изменять эту первоначальную коллекцию в любой момент времени. Множество методов предоставляют возможность добавления новых элементов, фильтрации элементов, а также передвижения по дереву DOM. Рассмотрим эти методы подробно.

Добавление и фильтрация элементов

Для добавления и фильтрации элементов коллекции предназначены следующие методы.

$("<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
$("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(<Селектор>)
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");
Предыдущая статья Все статьи Следующая статья