JQuery основы. Фильтр выбора элементов. Часть 2

Ромчик
2

Изучаем jquery

Доброго времени суток. И мы продолжаем знакомиться с 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 и др. Теперь после, того как мы научились выбирать элементы, мы перейдем к действиям над ними. Так, что не пропускайте выхода новых постов и вступайте в группу в Вконтакте.

Понравилась статья? Поделись с друзьями.
  • Add to favorites
  • Добавить ВКонтакте заметку об этой странице
  • Twitter
  • Facebook
  • Мой Мир
  • LiveJournal
  • Одноклассники
  • Блог Я.ру
  • MySpace
  • FriendFeed
  • В закладки Google
  • Google Buzz
  • Яндекс.Закладки
  • Reddit
  • StumbleUpon
  • Technorati
  • del.icio.us
  • БобрДобр
  • LinkedIn
  • Memori.ru
  • Сто закладок
  • Blogger

  • JQuery основы. Методы: attr, removeAttr, addClass, removeClass, css, animate. Часть 5 | Все о WEB программировании - 04.07.2012 в 14:00

    […] И мы с Вами уже научились делать выборку элементов, делать фильтрацию выборки, производить стандартные операции над элементами без […]

  • Михаил Медведев - 27.01.2014 в 20:16

    Здравствуйте! Помогите пожалуйста!
    Используется tb3spinner.js, но надеюсь, суть понятна без него.
    Есть такой код:

    JS:

    function calc() {
    var v = $(‘#wrap56 .spinner input’).val();
    var pv = $(‘#wrap56 #pv56’).val();
    $(‘#day-price56’).html(pv);
    $(‘#price56’).html(parseInt(pv*v));
    }
    var spinner = $(‘.spinner’).tb3spinner({‘value’:12,min:12,max:60, attrs:{‘name’:’days56′},changed:function(){calc()} });

    HTML:

    1200 рублей
    100 руб. в сутки)

    Так все работает.

    Но что делать, если на странице неизвестное количество wrap[id] (wrap55,wrap56,wrap57, …)?

    Пытался что-то сделать через div[id^=wrap] и this — ничего не получается.Помогите пожалуйста!

    Как правильно сделать выборку?
    Заранее огромное спасибо!

  • ©2012-2017 По всем вопросам обращайтесь через форму обратной связи

    Яндекс.Метрика