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

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

  • add(<Параметр>) — добавляет элементы и возвращает новую коллекцию, не изменяя текущую коллекцию. В качестве параметра можно указать HTML-элемент, селектор (во втором параметре можно задать контекст), массив DOM-элементов или объект jQuery. Создадим элемент, затем добавим к нему новый HTML-элемент и выведем полученную коллекцию в конец содержимого всех тегов <div>:
$('<span>Текст</span>').add('<b>Новый элемент</b>')
   .appendTo('div');

Результат:

<div><span>Текст</span><b>Новый элемент</b></div>

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

$('p').add('#div1').html('Новый текст');

Передадим массив DOM-элементов:

$('#div1').add( $('p').get() ).html('Новый текст'); // DOM

Передадим объект jQuery:

$('#div1').add( $('p') ).html('Новый текст');       // jQuery
  • not(<Параметр>) — позволяет удалить определенные элементы из коллекции. Возвращает новую коллекцию, не изменяя текущую коллекцию. В качестве параметра может быть указан селектор, DOM-элемент, массив DOM-элементов или объект jQuery. Получим коллекцию всех тегов <div>, удалим из коллекции элемент с идентификатором div1, а затем выделим оставшиеся элементы коллекции:
$('div').not('#div1').css('color', 'red');

Удалим из коллекции элемент с идентификатором div1, передав в качестве параметра DOM-элемент:

$('div').not( document.getElementById('div1') )
        .css('color', 'red');

Теперь исключим из коллекции элемент с идентификатором div1, передав массив DOM-элементов:

$('div').not( $('#div1').get() ).css('color', 'red');

Такого же результата можно достичь, если передать объект jQuery:

$('div').not( $('#div1') ).css('color', 'red');

В качестве параметра можно указать ссылку на функцию следующего формата:

function <Название функции>([<Индекс>[, <Элемент DOM>]]) {
   // ...
}

Текущий элемент доступен внутри функции через указатель this или через параметр <Элемент DOM>. Обратите внимание: указатель this ссылается на текущий элемент объектной модели документа, а не на элемент коллекции jQuery. Индекс элемента в коллекции доступен через параметр <Индекс>. Чтобы удалить элемент, необходимо внутри функции обратного вызова вернуть значение true. Получим коллекцию всех тегов <div>, удалим из коллекции элемент с идентификатором div1, а затем выделим оставшиеся элементы коллекции:

$('div').not( function() {
   return this.id === 'div1';
}).css('color', 'red');

Удалим из коллекции все элементы с четными индексами:

$('div').not( function(i) {
   return (i % 2) === 0;
}).css('color', 'red');
  • filter() — позволяет ограничить коллекцию дополнительным условием. Возвращает новую коллекцию, не изменяя текущую коллекцию. В отличие от метода not(), не удаляет элементы, соответствующие селектору, а, наоборот, оставляет только их. Метод имеет четыре формата:
filter(<Селектор>)
filter(<DOM-элемент или массив DOM-элементов>)
filter(<Объект jQuery>)
filter(<Функция обратного вызова>)

В первом формате метода передается селектор. Для примера выделим элемент с определенным идентификатором:

$('div').filter('#div1').css('color', 'red');

Пример указания DOM-элемента:

$('div').filter( document.getElementById('div1') )
        .css('color', 'red');

Теперь оставим в коллекции элемент с идентификатором div1, передав массив DOM-элементов:

$('div').filter( $('#div1').get() ).css('color', 'red');

Такого же результата можно достичь, если передать объект jQuery:

$('div').filter( $('#div1') ).css('color', 'red');

Четвертый формат метода filter() позволяет ограничить набор произвольным условием. В параметре <Функция обратного вызова> указывается ссылка на функцию следующего формата:

function <Название функции>([<Индекс>[, <Элемент DOM>]]) {
   // ...
}

Текущий элемент доступен внутри функции через указатель this или через параметр <Элемент DOM>. Обратите внимание: указатель this ссылается на текущий элемент объектной модели документа, а не на элемент коллекции jQuery. Индекс элемента в коллекции доступен через параметр <Индекс>. Чтобы оставить элемент в наборе, необходимо внутри функции обратного вызова вернуть значение true. Выделим красным цветом ссылку с определенным текстом:

$('a').css('color', 'silver')
      .filter( function() {
         return this.innerHTML === 'Ссылка 2';
      }).css('color', 'red');

Удалим из коллекции все элементы с четными индексами:

$('div').filter( function(i) {
   return (i % 2) !== 0;
}).css('color', 'red');

Учебник по jQuery и AJAX
Учебник по jQuery и AJAX в формате PDF

Помощь сайту

ЮMoney (Yandex-деньги): 410011140483022

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