АКЦИЯ: бесплатные месячные курсы по созданию сайтов
на выбор: верстка, JavaScript, PHP, Python и фреймворки. Сегодня последний день для записи! Жми!
60 of 119 menu
Бесплатный ЛЕТНИЙ курс по React фреймворку NextJS. Мы уже начали, но еще можно присоединится! Жми для записи!

Метод filter

Метод filter оставляет в наборе только те элементы, которые удовлетворяют определенному селектору.

Синтаксис

Фильтрация по селектору:

.filter(селектор);

Параметр также может быть DOM элементами или объектом jQuery:

.filter(DOM элемент или объект jQuery);

Можно также фильтровать элементы с помощью функции, которая вызывается отдельно для каждого из выбранных элементов. Если она возвращает true, то текущий элемент будет включен в конечный результат, если false - не включен. Сами элементы доступны в функции, в переменной this, а их порядковые номера в наборе — в переменной index:

.filter(function(index, elem))

Пример

Давайте найдем все абзацы, поставим им в начало текст '!' с помощью prepend, затем получим из найденных только абзацы с классом www с помощью filter и поставим им в конец текст '?' с помощью append:

<p>text</p> <p>text</p> <p class="www">text</p> <p class="www">text</p> $('p').prepend('!').filter('.www').append('?');

HTML код станет выглядеть так:

<p>!text</p> <p>!text</p> <p class="www">!text?</p> <p class="www">!text?</p>

Пример

Давайте с помощью функции найдем все абзацы, у которых есть тег strong и поставим им текст '!!!':

<p><strong>text</strong></p> <p><strong>text</strong></p> <p>text</p> <p>text</p> $('p').filter(function() { return $('strong', this).length === 1; }).html('!!!');

HTML код станет выглядеть так:

<p>!!!</p> <p>!!!</p> <p>text</p> <p>text</p>

Смотрите также

  • метод find,
    который находит элементы по селектору среди уже найденных
  • метод has,
    который фильтрует набор выбранных элементов по потомкам
enru