JQuery основы. Фильтр выбора элементов. Часть 2
Доброго времени суток. И мы продолжаем знакомиться с 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 и др. Теперь после, того как мы научились выбирать элементы, мы перейдем к действиям над ними. Так, что не пропускайте выхода новых постов и вступайте в группу в Вконтакте.
[…] И мы с Вами уже научились делать выборку элементов, делать фильтрацию выборки, производить стандартные операции над элементами без […]
Здравствуйте! Помогите пожалуйста!
Используется 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 — ничего не получается.Помогите пожалуйста!
Как правильно сделать выборку?
Заранее огромное спасибо!