.filter()

Учитывая объект jQuery, представляющий набор DOM-элементов, метод .filter() создает новый объект jQuery из подмножества соответствующих элементов. Поставленный селектор проверяется относительно каждого элемента; все элементы, соответствующие селектору, будут включены в результат.

Представьте страницу со списком:

<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
  <li>list item 6</li>
</ul>

Мы можем применить этот метод к набору элементов списка:

$( "li" ).filter( ":nth-child(2n)" ).css( "background-color", "red" );

В результате вызова фоновый цвет элементов 2, 4 и 6 станет красным, так как они соответствуют селектору.

Использование функции фильтрации

Вторая форма этого метода позволяет нам фильтровать элементы по функции, а не по селектору. Для каждого элемента, если функция возвращает true (или значение, рассматриваемое как истинное), элемент включается в отфильтрованный набор; в противном случае — исключается. Предположим, у нас есть более сложный фрагмент HTML:

<ul>
  <li><strong>list</strong> item 1 - one strong tag</li>
  <li><strong>list</strong> item <strong>2</strong> -
    two <span>strong tags</span></li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
  <li>list item 6</li>
</ul>

Мы можем выбрать элементы списка, а затем отфильтровать их по содержимому:

$( "li" )
  .filter(function( index ) {
    return $( "strong", this ).length === 1;
  })
    .css( "background-color", "red" );

Этот код изменит только первый элемент списка, так как он содержит ровно один <strong> тег. Внутри функции фильтра this ссылается на каждый DOM-элемент по очереди. Передаваемый параметр функции сообщает нам индекс этого DOM-элемента в наборе, соответствующем объекту jQuery.

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

$( "li" )
  .filter(function( index ) {
    return index % 3 === 2;
  })
    .css( "background-color", "red" );

Это изменение кода приведет к выделению третьих и шестых элементов списка, так как используется оператор модуля (%) для выбора каждого элемента с index значением, которое при делении на 3 даёт остаток 2.

Примечание: Когда в .filter() передается строка CSS-селектора, текстовые и комментарийные узлы всегда удаляются из результирующего объекта jQuery во время процесса фильтрации. Когда предоставляется конкретный узел или массив узлов, текстовый или комментарийный узел будет включен в результирующий объект jQuery только в том случае, если он соответствует одному из узлов в массиве фильтра.