LOGO JQuery
Селекторы Фильтры JQuery | Учебник JQuery

Простые фильтры

Фильтры, с помощью которых можно уточнить результат других селекторов.
По назначению и синтаксису они очень похожи на псевдоклассы в CSS

:focus

Соответствует тому из выбранных с помощью селектора элементов,
который находится в фокусе.
$("input:focus"); // вернет input-элемент, находящийся в фокусе.
$("input[type='text']:focus"); // вернет текстовое поле ввода, находящееся в фокусе. 
Не стоит использовать :focus без предваряющего его селектора
т.е. просто $(":focus")
это равносильно $("*:focus"), а селектор "*" является наиболее "медленным" из селекторов.
setInterval(function(){
	$('input').removeClass('focused');
	$('input:focus').addClass('focused');
},1000);
Откройте пример в новом окне и посмотрите исходный код

:first

Соответствует первому элементу, из всех выбранных с помощью селектора.
Эквивалентен селектору :eq(0).

:last

Соответствует последнему элементу, из всех выбранных с помощью селектора.
$('div:first'); // вернет первый div-элемент на странице.
$('.lBox:first'); // вернет первый элемент с классом lBox.
$('div[title]:first'); // вернет первый div-элемент содержащий атрибут title.

$('div:last'); // вернет последний div-элемент на странице. 
$('.lBox:last'); // вернет последний элемент с классом lBox. 
$('div[title]:last'); // вернет последний div-элемент содержащий атрибут title. 
Найдем первого парня на деревне (первый элемент с классом man, находящийся внутри элемента village):
$('.village .man:first')
  .css('border', '3px solid red');
Откройте пример в новом окне и посмотрите исходный код

Найдем последнего парня на деревне (последний элемент с классом man, находящийся внутри элемента village):
$('.village .man:last')
  .css('border', '3px solid red');
Откройте пример в новом окне и посмотрите исходный код

:eq(index)

Соответствует элементу, занимающему позицию под номером index, среди уже выбранных с помощью селектора элементов.
Нумерация элементов начинается с 0.
$('div:eq(0)'); // вернет первый div-элемент на странице. 
$('div p:eq(1)'); // вернет второй параграф, лежащий внутри div
$('div p.box:eq(1)'); // вернет второй параграф с классом box, лежащий внутри div
Найдем и выделим второй и пятый элемент span на странице:
$('span:eq(1)').css('border', '3px solid red');
$('span').eq(4).css('border', '3px solid blue');
Откройте пример в новом окне и посмотрите исходный код

:not(selector)

Исключает элементы удовлетворяющие селектору selector из найденных элементов.
//вернет все div-элементы, кроме тех, которые принадлежат классу lBox.
$('div:not(.lBox)'); 
//вернет все div-элементы, кроме элемента с идентификатором bigBang.
$('div:not(#bigBang)'); 
//вернет все input-элементы, кроме текстовых полей.
$('input:not([type=text])');
Метод .not() выполняет то же самое, что и рассматриваемый селектор, и чаще всего, при его использовании, код получается более читаемым, чем при использовании селектора :not()
//вернет div-элементы не имеющие класса bigBlock.
$("div").not(".bigBlock"); 
//вернет div-элементы класса bigBlock, без идентификатора area.
$("div.bigBlock").not("#area");  
выделим все элементы с классом rissole (котлета), кроме тех, которые содержат элементы с классом fly (муха):
$('.rissole:not(:has(.fly))')
  .css('border', '3px solid red');
Откройте пример в новом окне и посмотрите исходный код

:even

Соответствует элементам с четными номерами позиций.
Поскольку счет элементов начинается с 0
:even будет соответствовать 1, 3 и т. д. элементам.

:odd

Соответствует элементам с нечетными номерами позиций.
Поскольку счет элементов начинается с 0
:odd будет соответствовать 2, 4 и т. д. элементам.
$('.lBox:even'); //вернет все четные элементы, с классом lBox. 
$(".lBox:odd"); //вернет все нечетные элементы, принадлежащие классу lBox. 
Элементы списка рассчитаются на "первый-второй", а так же примут чередующиеся цвета:
$("#list .item:even")
	.append(" первый!")
	.css("background-color", "#cceecc");
$("#list .item:odd")
	.append(" второй!")
	.css("background-color", "#eeeeee");
Откройте пример в новом окне и посмотрите исходный код

:gt(n)

Фильтрует набор выбранных элементов, оставляя только те, индекс которых превышает n.

:lt(n)

Фильтрует набор выбранных элементов, оставляя только те, индекс которых меньше n.
 //вернет все элементы, принадлежащие классу lBox, кроме первых четырех.
$('.lBox:gt(3)');
// вернет первые три элемента (с индексами 0, 1, 2) с классом lBox.
$('.lBox:lt(3)') 	
Выделим планеты, идущие после земли (идущей под индексом 2):
Установим зеленый цвет фона всем элементам, с индексом, превышающим 2
$('#list .item:gt(2)')
  .css('background-color', '#cceecc');
Откройте пример в новом окне и посмотрите исходный код

:animated

Соответствует элементам, которые в данный момент участвуют в анимации.
//вернет все элементы класса lBox, которые в данный момент участвуют в анимации.
$('.lBox:animated');
При нажатии на кнопку, найдем и выделим div-элемент, который в текущий момент участвует в анимации:
$( '#run' ).click( function() {
  $( 'div' ).filter( ':animated' )
    .toggleClass( 'colored' );
});

function animateIt() {
  $('#mover').fadeToggle( 'slow', animateIt );
}
 
animateIt();
Откройте пример в новом окне и посмотрите исходный код

:hidden

Соответствует всем скрытым элементам страницы. Элемент считается скрытым в следующих случаях:

- Его css-свойство display равно none
- Он является элементом формы с type="hidden"
- Его высота или ширина равна 0
- Он находится внутри невидимого элемента и поэтому тоже невидим на странице.
// вернет все невидимые элементы класса lBox.
$('.lBox:hidden'); 
// вернет все невидимые элементы, которые лежат внутри элементов класса lBox. 
// Этот пример подчеркивает то, что наличие пробела перед фильтрами существенно.
$('.lBox :hidden'); 

:visible

Соответствует всем видимым элементам страницы.
$(".lBox:visible"); // вернет все видимые элементы класса lBox. 

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

:contains(text)

Соответствует элементам, которые содержат строку text.
Чувствителен к регистру.
// вернет все div-элементы, внутри которых найдется строка Петр.
$('div:contains("Петр")');
С помощью селектора :contains(text),
Элемент будет выбран как в случае если строка text присутствует непосредственно внутри него,
Так и в случае, если она находится внутри одного из его потомков.
$('div:contains("товарищ")').css('border', '1px solid red');
Откройте пример в новом окне и посмотрите исходный код

:empty

Соответствует элементам, которые не содержат текста и других элементов.
Наличие одного только пробела уже считается текстом
$('div:empty'); // вернет все пустые div-элементы. 
Селектор :empty является инверсией :parent.

Найдем все пустующие депозитные ячейки (пустые ячейки в таблице):
$('td:empty')
  .text('Пусто')
  .css('background', 'rgb(255,220,200)');
Откройте пример в новом окне и посмотрите исходный код

:has(selector)

Соответствует элементам, которые обладают потомками, удовлетворяющими селектору selector.
// вернет div-элементы, внутри которых есть элементы с тегом p.
$('div:has(p)');
// вернет div-элементы, находящиеся внутри элемента с идентификатором content и внутри которых есть элементы с тегом p.
$('#content div:has(p)'); 
Для наилучшей производительности подойдет следующий вариант:
// не самый быстрый вариант
$( '.some-hint:has(a)' );

// эффективнее будет
$( '.some-hint' ).has( 'a' );
Найдем div внутри которых есть элементы с классом lited и окрасим их в золотой цвет:
$('div:has(.lited)')
  .css('background-color', '#efe18c');
Откройте пример в новом окне и посмотрите исходный код

:parent

Соответствует всем непустым элементам.
Наличие одного только пробела уже будет считается наличием содержимого.
$("div:parent"); // вернет все непустые div-элементы. 
Для наилучшей производительности подойдет следующий вариант:
// не самый быстрый вариант
$( '.some-hint:parent' );

// эффективнее будет
$( '.some-hint' ).filter(':parent');
Не стоит путать селектор :parent с jQuery-методами .parent() и .parents() (которые ищут родительские элементы и всех потомков, соответственно). Несмотря на общее название, назначения у селектора и методов разные.

Селектор :empty является инверсией :parent.

Найдем все непустые ячейки в таблице:
$("td:parent")
  .css('background', 'rgb(255,220,200)');
Откройте пример в новом окне и посмотрите исходный код

Child-фильтры

:nth-child(index/even/odd/equation)

В качестве аргумента принимает число или строку.

Число может представлять индекс элемента.
Обратите внимание, что здесь отсчет ведется с 1

строка - even, odd, или equation.

Выбираются все элементы, которые являются n-нными потомками своего родителя или четными/нечетными потомками.
// вернет все div-элементы, 
// которые находятся в своих непосредственных предках третьими по счету.
$('div:nth-child(3)');	
// вернет все div-элементы, 
// которые находятся в своих непосредственных предках на нечетных позициях.
$('div:nth-child(odd)');	
// вернет все div-элементы, 
// которые находятся в своих непосредственных предках на четных позициях
$('div:nth-child(even)');
// вернет все div-элементы, 
// которые в непосредственных предках находятся на позиции 
// с номерами удовлетворяющими выражению 2n+3 (5, 7, 9...).	
$('div:nth-child(2n+3)');
В примере мы ищем каждый второй элемент li во всех отобранных элементах ul, ну и отмечаем их.
$("ul li:nth-child(2)").append("<span> - 2-ой!</span>");
Откройте пример в новом окне и посмотрите исходный код

:first-child

Выбираются все элементы, которые являются первыми потомками своих родителей.

:last-child

Выбираются все элементы, которые являются последними потомками своих родителей.

В примере мы выбираем первый элемент span в каждом найденном элементе div и подчеркиваем их текст.
Да, и еще при наведении курсора мыши добавляем класс, который сделает текст жирным и зеленого цвета.
$("div span:first-child")
  .css("text-decoration", "underline")
  .hover(function () {
    $(this).addClass("sogreen");
  }, function () {
    $(this).removeClass("sogreen");
  });
Откройте пример в новом окне и посмотрите исходный код


В примере мы выбираем последний элемент span в каждом найденном элементе div и делаем их текст красного цвета. Уменьшаем размер шрифта до 80%. При наведении курсора мыши добавляем класс, который зачеркнет текст.
$("div span:last-child")
  .css({color:"red", fontSize:"80%"})
  .hover(function () {
    $(this).addClass("solast");
  }, function () {
    $(this).removeClass("solast");
  });
Откройте пример в новом окне и посмотрите исходный код

:only-child

Выбираются все элементы, которые являются единственными потомками своего родителя.

Если родитель имеет других потомков - ничего не будет выбрано.

В этом примере в каждом отобранном элементе div ищем кнопку не имеющую сестринских элементов.

Ну и немного ее модифицируем, устанавливая для нее текст "Alone" и синюю рамку шириной 2 пиксела.
$("div button:only-child")
.text("Alone").css("border", "2px blue solid");
Откройте пример в новом окне и посмотрите исходный код