Фильтры для выбора элементов в jQuery

Для выбора элементов, кроме селекторов можно ещё использовать фильтры. Рассмотрим базовые фильтры, фильтры по дочерним элементам и содержимому, фильтры видимости и для элементов формы.

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

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

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

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

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

Примеры

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

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

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

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

3. Найдём все <p>, имеющие lang="ru":

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

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

Для элементов значение языка определяется атрибутом lang и, возможно, информацией из <meta> или заголовка HTTP.

4. Выполним поиск <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>

При этом внутри :not принимаются все селекторы, например: :not(section div), :not(section, div).

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

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

6. Найдём элемент на который указывает хэш 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 – выбирает элементы, которые являются единственными дочерними элементами данного типа своего родителя.

Примеры

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Кроме указания порядкового номера элемента, в :nth-child ещё можно использовать odd, even и формулу an+b.

odd используется для выбора нечётных элементов, even – чётных, an+b – по формуле.

В формуле вместо a и b указываются числа, а n выступает в качестве счётчика (0, 1, 2, ...).

Например, 2n+1 выберет элементы, которые имеют следующие порядковые номера в своём родителе: 1, 3, 5, 7 и т.д.

Фильтры :nth-last-child, :nth-of-type, :nth-last-of-type в качестве аргумента могут принимать такие же значения как :nth-child.

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

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

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

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

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

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

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

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

10. Выберем <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')

Примеры

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

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

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

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

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

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

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

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

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

4. Выберем все непустые <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').

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

Примеры

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

Примеры

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

Примеры

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

:hidden

:visible

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

:button

:checkbox

:checked

:disabled

:enabled

:file

:focus

:image

:input

:password

:radio

:reset

:selected

:submit

:text

Комментарии: 0