Оглавление

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

Для добавления и фильтрации элементов коллекции предназначены следующие методы.
add{<Выражение>) — добавляет элементы в коллекцию. В качестве параметра можно указать HTML-элемент, селектор, коллекцию DOM-элементов или объект jQuery. Возвращает новую коллекцию элементов. Создадим элемент, затем добавим к нему новый HTML-элемент и выведем полученную коллекцию в конец содержимого всех тегов <div>.

$("<span>Текст</span>").add("<b>Новый элемент</b>") 
   .appendTo("div");


Найдем коллекцию всех тегов <span>, добавим к ним элемент с идентификатором div1, а затем выведем текст во всех элементах коллекции.

$("span").add("#divl").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");

 

 

Комментарии принадлежат их авторам. Мы не несем ответственности за их содержание.
Отправитель Нити