jQuery метод .filter()

Определение и применение

jQuery метод .filter() уменьшает набор совпавших элементов коллекции до тех, которые удовлетворяют заданному селектору, элементу DOM, объекту jQuery или условию, переданному в функцию.

jQuery синтаксис:

Синтаксис 1.0:

Код
$( selector ).filter( selector )
$( selector ).filter( function( index, element ))

selector - Selector

function - Function

index - Integer

element - Element элемент DOM

Синтаксис 1.6:

JavaScript
$( selector ).filter( elements )
$( selector ).filter( selection )

elements - Element один, или несколько элементов DOM

Код
selection - объект jQuery

Добавлен в версии jQuery

1.0 (синтаксис обновлен в версии 1.6)

Значения параметров

Параметр Описание
selector / elements / selection Строка селектор, элемент DOM, или объект jQuery, использующиеся для уменьшения набора совпавших элементов коллекции до указанного значения. Элемент будет оставлен в коллекции jQuery в том случае, если он соответствует переданному селектору, элементу DOM, или объекту jQuery.
function(index, element) Позволяет фильтровать элементы используя функцию, которая возвращает логическое значение (Boolean). Если функция возвращает true для конкретного элемента коллекции, то такой элемент будет оставлен в коллекции, в противном случае (false) он будет исключен. Внутри функции this ссылается на текущий элемент в наборе.
Функция принимает следующие параметры:
  • index - индекс элемента в наборе.
  • element - текущий элемент в наборе совпавших элементов.

Пример использования

Пример использования jQuery метода filter()

Нажмите ▶, затем выполните действие из пояснения. Измените JavaScript и запустите пример ещё раз. В редакторе используется jQuery 4.0.0.

index.html
HTML
<button class="withSelector">selector</button>
<button class="withFunction">function</button>
<ul>
  <li>Уровень 1</li>
  <li>Уровень 1</li>
  <li>
    Уровень 1
    <ul>
      <li>Уровень 2</li>
      <li class="level2">Уровень 2</li>
      <li>
        Уровень 2
        <ul>
          <li>Уровень 3</li>
          <li>Уровень 3</li>
          <li>Уровень 3</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>
main.js
JavaScript
$(document).ready(function () {
    $('.withSelector').click(function () {
        $('*').css('border', 'none')
        $('li').filter('.level2').css('border', '1px solid green')
    })
    $('.withFunction').click(function () {
        $('*').css('border', 'none')
        $('li')
            .filter(function (i, elem) {
                console.log(i % 2 == 0)
                return i % 2 == 0
            })
            .css('border', '1px solid green')
    })
})

В этом примере мы разместили следующие две кнопки (элемент <button>):

  • При нажатии на первую мы вызываем функцию, которая с помощью метода .filter() уменьшает набор совпавших элементов <li> до тех, которые имеют класс level2 и устанавливает им (в нашем случае ему) с помощью метода .css() сплошную границу размером 1 пиксель зеленого цвета. Кроме того, при нажатии на любую кнопку с использованием универсального селектора и метода .css() мы убираем границы у всех элементов в документе.
  • При нажатии на вторую мы вызываем функцию, которая с помощью метода .filter() и функции, переданной в качестве параметра уменьшаем набор совпавших элементов <li> до тех, которые удовлетворяют условию, переданному в функцию. Наша функция, определяет результат вычисления деления индекса элемента на два и сравнивает этот результат с нулем, если условие соответствует возвращается логическое значение true, и такому элементу с помощью метода .css() мы устанавливаем сплошную границу размером 1 пиксель зеленого цвета. Кроме того, мы выводим в консоль каждый результат вызова этой функции.