Доброго времени суток. И мы продолжаем знакомиться с jQuery. Так в прошлой статье мы остановились на способах выборки элементов. Но не всегда выборка помогает нам выбрать необходимые элементы. И для этого в jQuery есть способы фильтрации из уже выбранных элементов. Как раз о фильтрации выбранных элементов в jQuery мы и поговорим в данном посту.

В jquery существует множество методов для фильтрации выбранных элементов, о которых Вы можете прочитать в официальной документации. А я рассмотрю только самые необходимые и часто употребляемые (на мой взгляд) фильтры.

Выбор четных элементов even

Возникает такая ситуация, когда необходимо выбрать из таблицы только четные элементы. Для этого разработчики создали специальный фильтр :even.  Например у нас есть таблица:

<table id="’table’">
<tbody>
<tr>
<td>1</td>
<td>Имя 1</td>
</tr>
<tr>
<td>2</td>
<td>Имя 2</td>
</tr>
<tr>
<td>3</td>
<td>Имя 3</td>
</tr>
<tr>
<td>4</td>
<td>Имя 4</td>
</tr>
</tbody>
</table>
<pre>

И нам необходимо выбрать четные строки. Для этого выбираем необходимые элементы и накладываем на них фильтр четности. Вот, так это выглядит в jQuery:

$(‘#table tr:even’);

Таким образом мы выбрали все четные строки. Но тут будьте внимательны — все четные строки с точки зрения javascript. А в javascript отсчет начинается с 0, поэтому у нас будут выбраны первая строка в таблице и третья строка в таблице.

Выбор нечетных элементов odd

Противоположный (если можно так сказать) предыдущему фильтру является фильтр odd — выбор нечетных элементов. Предположим из таблицы нам необходимо выбрать нечетные строки. Тогда применим фильтр odd и вот так это будет выглядеть:

$(‘#table tr:odd’);

Выбор первого элемента first

Если нам необходимо выбрать только один элемент — первый, то для этих целей подойдет фильтр first. Например, из таблицы нам необходимо выбрать только первую строку, тогда выборка данного элемента будет выглядеть следующим образом:

$(‘#table tr:first’);

Выбор последнего элемента last

Для выбора последнего элемента применяется фильтр last. Например из нашей таблицы необходимо выбрать последнюю строку. Тогда наша выборка:

$(‘#table tr:last’);

Фильтр отрицания not

Данный фильтр необходим для выборки всех элементов, кроме элементов которые подходят условию. Например, у нас есть

</pre>
<div id="’1’"></div>
<div>Пример.</div>
<pre>

Нам необходимо выбрать все div, кроме тех div-ов, которые находятся внутри div-а c id=’1’.
И если мы напишем:

$(‘div’);

То выберем все div, даже те которые находятся в div c id=’1’, поэтому в данном случае необходимо применить фильтр not.

$(‘div:not(#1 div)’);

И тем самым мы выберем все необходимы нам div

Выбор элемента, который содержит определенный элемент has

Иногда бывают ситуации, что необходимо выбрать элемент, который содержит внутри себя другой определенный элемент. И для этого в jquery существует фильтр has. Например, нам необходимо выбрать div из предыдущего примера, в котором есть еще div. Тогда наша выборка будет иметь следующий вид:

$(‘div:has(div)’);

Т.е. выбираем все div, а затем применяем фильтр has в котором указывем, что выбранные div в себе должны содержать другие div

Выбор элемента по содержимому

Например нам необходимо выбрать какой-то элемент по его содержимому, тогда
нам на помощь приходит фильтр contains. Из приведенного выше кода нам необходимо выбрать div, в котором содержится “Пример”:

$(‘div:contains(Привет)’);

Фильтр выбора элементов без наследников empty

Бывают такие ситуации, когда необходимо из выбранных элементов оставить только те, которые не имеют наследников и ничего не содержат. Например, у нас есть html код

</pre>
<table>
<tbody>
<tr>
<td>1</td>
<td></td>
</tr>
<tr>
<td></td>
<td>2</td>
</tr>
</tbody>
</table>
<pre>

И нам нужно выбрать все td у которых нет наследников.

$(‘td:empty’);

И в результате у нас будут выбран второй <td> из первого <tr> и первый <td> из второго  <tr>

Фильтр по скрытым элементам

Достаточно часто в jQuery приходиться выбирать все скрытые элементы. И для этого существует специальный фильтр hidden. Т.е. если нам необходимо выбрать все div-ы, которые на данный момент являются скрытыми, то необходимо записать следующий код:

$(‘div:hidden’);

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

Противоположный по значению фильтру hidden — фильтр visible, который фильтрует все видимые элементы. Т.е. если нам необходимо выбрать все div-ы, которые в данный момент видимы.

$(‘div:visible’);

Мы рассмотрели основные фильтры jQuery для выбора элементов, но это не все фильтры. Я попытался описать только самые основные, которые чаще всего встречаются. За бортом остались такие фильтры, как: :animated, :eq(), :focus, :header и др. Теперь после, того как мы научились выбирать элементы, мы перейдем к действиям над ними. Так, что не пропускайте выхода новых постов и вступайте в группу в Вконтакте.