Фильтрация выборки

С помощью следующего метода .filter() в наборе можно оставить только те элементы, которые удовлетворяют определенному селектору.

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

<p>Абзац</p>
<p>Абзац</p>
<p class="www">Абзац</p>
<p class="www">Абзац</p>

<script>
$('p').prepend('!').filter('.www').append('?');
</script>

Базовые фильтры jQuery

В jQuery имеются следующие базовые фильтры:

:animated выбирает элементы, которые в данный момент находятся в процессе анимации
:header выбирает элементы, которые являются заголовками, т.е. <h1>, <h2>, <h3> и т.д.
:lang выбирает элементы, имеющие указанный язык
:not выбирает элементы, не соответствующие заданному селектору
:root выбирает элемент являющийся корневым в документе (в HTML – это <html>)
:target выбирает элемент, идентификатор которого равен хэшу URL

Фильтры :animated и :header не являются стандартным CSS селекторами. Они реализованы в jQuery. При их использовании снижается производительность, поэтому в выборке не рекомендуется их использовать. Вместо этого предпочтительнее воспользоваться методом filter и выполнить фильтрацию с помощью них уже после получения набора элементов:

.filter(':animated')
.filter(':header')

Получим <div>, которые в данный момент находятся в процессе анимации:

var $set1 = $('div:animated');
// лучше так
var $set2 =  $('div').filter(':animated');

Выберем заголовки, расположенные в <main>:

var $set1 = $('main :header');
// лучше так
var $set2 =  $('main *').filter(':header');

Найдём все <p>, имеющие lang="ru". Для элементов значение языка определяется атрибутом lang и, возможно, информацией из <meta> или заголовка HTTP:

<p lang="ru">...</p>
<p lang="fr">...</p>
<p>...</p>

<script>
  var $p = $(':lang("ru")');
</script>

Выполним поиск <span>, которые расположены сразу же после <input> на одном уровне вложенности за исключением тех у которых <input> в состоянии checked:

<form>
  <div>
    <input type="checkbox" name="a">
    <span>A</span>
  </div>
  <div>
    <input type="checkbox" name="b" checked="checked">
    <span>B</span>
  </div>
</form>

<script>
  var $span = $('input:not(:checked) + span');
</script>

Выведем в начало <body> имя узла, который является корневым для этого документа:

$('body').prepend($(':root').eq(0).prop('nodeName')); // Корень этого документа: HTML

Найдём элемент на который указывает хэш URL #section-2:

<div id="section-1">...</div>
<div id="section-2">...</div>
<div id="section-3">...</div>

<script>
  var $target = $(':target');
</script>

Фильтр по дочерним элементам

В jQuery имеются следующие фильтры по дочерним элементам:

:first-child выбирает все элементы, которые являются первыми дочерними элементами своего родителя
:first-of-type выбирает все элементы, которые являются первыми элементами указанного типа своего родителя
:last-child выбирает все элементы, которые являются последними дочерними элементами своего родителя
:last-of-type выбирает все элементы, которые являются последними элементами указанного типа своего родителя
:nth-child выбирает элементы по их порядковому номеру в родителе
:nth-last-child выбирает элементы по их порядковому номеру в родителе, но в отличие от :nth-child отсчёт вёдется не с начала, а с конца
:nth-last-of-type предназначен для выбора элементов по их порядковому номеру в родителе с учетом их типа, при этом в отличие от :nth-of-type отсчёт ведётся с конца
:nth-of-type предназначен для выбора элементов по их порядковому номеру в родителе с учетом их типа
:only-child выбирает все элементы, которые являются единственными дочерними элементами своего родителя
:only-of-type выбирает элементы, которые являются единственными дочерними элементами данного типа своего родителя

Выберем все <div>, которые являются единственными дочерними элементами данного типа своего родителя:

<section>
  <div>...</div>
  <div>
    <div>...</div>
    <div>...</div>
  </div>
  <div>...</div>
</section>

<script>
var $elements = $('div:first-child');
</script>

Найдём все <div>, являющиеся первыми дочерними элементами указанного типа своего родителя:

<section>
  <h2>...</h2>
  <div>...</div>
  <div>...</div>
</section>

<script>
  var $elements = $('div:first-of-type');
</script>

Выполним поиск <p>, являющиеся последними дочерними элементами своего родителя:

<div>
  <h2>...</h2>
  <p>...</p>
  <p>...</p>
</div>

<script>
  var $elements = $('p:last-child');
</script>

Выберем все <h2>, являющиеся последними дочерними элементами указанного типа своего родителя:

<section>
  <h2>...</h2>
  <p>...</p>
  <h2>...</h2>
  <p>...</p>
</section>

<script>
  var $elements = $('h2:last-of-type');
</script>

Найдём <li>, являющиеся 2 дочерними элементами своего родителя:

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

<script>
  var $elements = $('li:nth-child(2)');
</script>

Найдём <p>, являющиеся дочерними элементами своего родителя и имеющие порядковые номера, определяемые по формуле 3n (отсчёт необходимо выполнять с конца):

var $elements = $('p:nth-last-child(3n)');

Выполним поиск <p>, являющиеся чётными дочерним элементами указанного типа своего родителя:

var $elements = $("p:nth-of-type(even)');

Найдём <li>, являющиеся нечётными дочерним элементами указанного типа своего родителя (отсчёт необходимо выполнять с конца):

var $elements = $('p:nth-last-of-type(odd)');

Выберем <div>, которые являются единственными дочерними элементами своего родителя:

var $elements = $('div:only-child');

Выберем <p>, которые являются единственными дочерними элементами указанного типа своего родителя:

var $elements = $('p:only-of-type');

Фильтры содержимого

В jQuery имеются следующие фильтры содержимого:

:contains выбирает элементы, имеющие указанный текст
:empty выбирает элементы, которые не содержат дочерних узлов (включая текстовых)
:has выбирает элементы, которые содержат хотя бы один элемент, соответствующий указанному селектору
:parent выбирает элементы, имеющие дочерние узлы (элемент или текст). Т.е. выполняет действия противоположные фильтру :empty

Фильтры :has и :parent не являются стандартным CSS селекторами. Они реализованы в jQuery. При их использовании снижается производительность, поэтому в выборке не рекомендуется их использовать. Предпочтительнее выполнить фильтрацию после получения набора элементов.

Вместо фильтра :has лучше использовать метод has:

.has(selector/DOMElement)

Фильтровать с помощью :parent рекомендуется так:

.filter(':parent')

Выберем <p> с текстом «груша»:

<p>Фрукты: банан, груша и персик.</p>
<p>Овощи: капуста, огурец и помидор.</p>
<p>Ягоды: вишня, клубника и облепиха.</p>

<script>
  var $elements = $('p:contains("персик")');
</script>

Найдём все пустые <p>:

<p>...</p>
<p></p>
<p>...</p>

<script>
  var $empty = $('p:empty');
</script>

Выполним поиск <section>, которые содержат <h2>:

<section>
  <h2>...</h2>
  <p>...</p>
</section>
<section>
  <p>...</p>
</section>

<script>
  var $elements = $('section:has(h2)');
  // лучше так
  // var $elements = $('section').has('h2');
</script>

Выберем все непустые <p>:

<p>...</p>
<p></p>
<p>...</p>

<script>
  var $notEmpty = $('p:parent');
  // лучше так
  // var $notEmpty = $('p').filter(':parent');
</script>

Фильтры видимости

В jQuery имеются следующие фильтры видимости:

:hidden
:visible

Фильтр :hidden и :visible не являются стандартными CSS селекторами. Их рекомендуется использовать после выборки элементов следующим образом:

// :hidden
.filter(':hidden')
// :visible
.filter(':visible')

:hidden

:hidden выбирает элементы, которые в данный момент являются скрытыми. Элемент считается скрытым, если:

CSS-свойство display имеет значение none
является элементом формы с type="hidden"
скрыт элемент-предок
он только создан, но ещё не добавлен на страницу
он является option, при этом независимо от того имеет он состояния selected или нет

Элементы с visibility:hidden или opacity:0 считаются видимыми, поскольку они занимают место на странице.

Во время анимации, в которой осуществляется скрытие элемента, он считается видимым до её завершения. Во время анимации, в которой выполняется отображение элемента, он считается видимым с её начала.

Например, выберем все скрытые элементы <div> на странице:

<div>...</div>
<div style="display: none;"></div>
<div style="visibility: hidden;">...</div>

<script>
  var $hiddenElems = $('div:hidden');
  // лучше так
  // var $hiddenElems = $('div').filter(':hidden');
</script>

:visible

:visible – выбирает элементы, которые в данный момент являются видимыми.

Этот фильтр противоположен :hidden.

Например, выберем все видимые элементы <div> на странице:

<div>...</div>
<div style="display: none;"></div>
<div style="visibility: hidden;">...</div>

<script>
  var $visibleElems = $('div:visible');
  // лучше так
  // var $visibleElems = $('div').filter(':visible');
</script>

Фильтры для элементов формы

В jQuery имеются следующие фильтры для элементов формы:

по типу (:button, :checkbox, :file, :image, :input, :password, :radio, :reset, :submit, :text)
по состоянию (:checked, :disable, :enabled, :focus, :selected)

Фильтры :button, :checkbox, :file, :image, :input, :password, :radio, :reset, :selected, :submit и :text являются расширениями jQuery. Вместо них рекомендуется для обеспечения максимальной производительности использовать стандартные CSS селекторы.

:button

:button – выбирает элементы button и с type="button".

Селектор $(':button') эквивалентен $('button, input[type="button"]').

:checkbox

:checkbox – выбирает элементы с type="checkbox".

Селектор :checkbox эквивалентен [type="checkbox"].

:checked

:checked выбирает элементы с состоянием checked или selected. Селектор :checked работает для флажков (type="checkbox"), переключателей (type="radio") и элементов <select>.

Если нужно получить только выбранные опции элементов <select>, то используйте фильтр :checked.

Пример выбора элементов с использованием фильтра :checked:

<form>
  <input type="checkbox" name="os[]">Windows
  <input type="checkbox" name="os[]" checked="checked">MacOS
  <input type="checkbox" name="os[]">Linux
</form>

<script>
  var $checked = $('input:checked');
</script>

:disabled

:disabled – выбирает неактивные элементы (т.е. находящиеся в состоянии disabled).

Несмотря на то, что результирующие выборки обычно одинаковы, фильтр :disabled отличается от селектора по атрибуту [disabled].

:disabled выбирает элементы которые фактически отключены (DOM-свойство disabled имеет значение true), а [disabled] – элементы, у которых данный атрибут присутствует.

Фильтр :disabled следует использовать только для выбора HTML-элементов, которые поддерживают атрибут disabled: <button>, <input>, <optgroup>, <option>, <select>, <textarea> и <fieldset>.

Например, получим все неактивные элементы <input>:

<form>
  <input type="text" name="login"  disabled="disabled">
  <input type="password" name="password">
</form>

<script>
var $elements = $('input:disabled');
</script>

:enabled

:enabled – выбирает активные элементы (т.е. не находящиеся в состоянии disabled).

Несмотря на то, что результирующие выборки обычно одинаковы, фильтр :enabled отличается от :not([disabled]). :enabled выбирает элементы, у которых DOM-свойство disabled имеет значение false, а :not([disabled]) – элементы, которых отсутствует атрибут disabled.

Например, получим все активные элементы <input>:

<form>
  <input type="text" name="login" disabled="disabled">
  <input type="password" name="password">
</form>

<script>
  var $elements = $('input:enabled');
</script>

:file

:file – выбирает элементы с type="file".

Селектор :fileэквивалентен [type="file"].

:focus

:focus выбирает элемент, если он в данный момент находится в фокусе.

Другой способ без необходимости его поиска по всему DOM-дереву:

var $focus = $(document.activeElement);

:image

:image – выбирает элементы с type="image".

Селектор :image эквивалентен [type="image"].

:input

:input – выбирает элементы input, textarea, select и button.

Выбрать все эти элементы без использования :input можно так:

var $input = $('input, textarea, select, button');

:password

:password – выбирает элементы с type="password". Фильтр :password эквивалентен [type="password"].

:radio

:radio выбирает элементы с type="radio". Фильтр :radio эквивалентен [type="radio"].

:reset

:reset выбирает элементы с type="reset". Фильтр :reset эквивалентен [type="reset"].

:selected

:selected выбирает элементы <option>, которые находятся в состоянии selected.

<select name="colors" multiple="multiple">
  <option>Красный</option>
  <option selected="selected">Оранжевый</option>
  <option>Желтый</option>
  <option selected="selected">Зеленый</option>
  <option>Голубой</option>
</select>

<script>
  var $selected = $('select[name="colors"]>option:selected');
</script>

:submit

:submit выбирает элементы с type="submit". Фильтр :submit предназначен для элементов <button> или <input>.

Селектор :submit эквивалентен input[type="submit"], button[type="submit"].

:text

:text выбирает элементы с type="text" и все элементы <input> без атрибута type (т.к. в этом случае он имеет по умолчанию атрибут type="text").

Перед селектором :text так и перед другими, которые начинаются с :, рекомендуется указывать тег или другой селектор (например, класс), чтобы ограничить диапазон поиска. Т.к., если этого не сделать, то будет подразумеваться универсальный селектор, т.е. *:text.

В этом случае рекомендуется как минимум использовать селектор input: $('input:text').