Создание собственных селекторов jQuery

Материал из JQuery

Перейти к: навигация, поиск

Библиотека jQuery предоставляет весьма исчерпывающий набор селекторов, с помощью которых можно находить и фильтровать элементы на странице. Однако, иногда появляется необходимость сделать собственный, нестандартный селектор. Библиотека jQuery предоставляет возможность создавать собственные селекторы вида

':selecorName' и ':selecorName(value)'.

Это так называемые фильтрующие (или псевдо) селекторы.

$("div:selecorName") вернет все div-элементы, удовлетворяющие фильтру selecorName.
$(".block:selecorName") вернет все элементы с классом block, удовлетворяющие фильтру selecorName.
$("div .block:selecorName") вернет все элементы с классом block, лежащие внутри div'ов и удовлетворяющие фильтру selecorName.
$(":selecorName") вернет все элементы, удовлетворяющие фильтру selecorName на странице. (такое использование крайне не желательно, поскольку оно будет выполняться очень долго).

Чтобы организовать собственный фильтрующий селектор, нужно использовать следующий шаблон:

$.expr[':'].selecorName = function(obj, index, meta, stack){
   // реализация фильтрующей функции
};

obj — DOM-элемент, который необходимо проверить на удовлетворение селектору.
index — порядковый номер проверяемого элемента (obj), в наборе фильтруемых элементов (нумерация начинается с нуля).
meta — подробности использования селектора (см. подробности ниже).
stack — массив со всеми фильтруемыми элементами.

Если фильтрующая функция возвращает true, то проверяемый элемент obj включается в результат, если false — не включается.

Теперь о параметре meta. Он представляет из себя массив из четырех элементов:

[
  Строка с полным вариантом фильтрующего селектора,
  Строка с именем фильтрующего селектора,
  Используемые в селекторе кавычки (если таковые имеются),
  Строка с переданным в селектор параметром (если он имеются)
]

Несколько примеров возможных значений параметра meta:

Селектор без параметра:

$('div:selecorName')
 
// meta будет содержать:
[
  ":selecorName",
  "selecorName",
  undefined,
  undefined
];

Селектор с параметром без кавычек:

$('div:selecorName(arg)')
 
// meta будет содержать:
[
  ":selecorName",
  "selecorName",
  '',
  'arg'
];

Селектор с параметром в кавычках:

$('div:selecorName("arg, arg2")')
 
// meta будет содержать:
[
  ":selecorName",
  "selecorName",
  '"',
  'arg, arg2'
];

Примеры

Организуем селектор, который будет искать элементы с CSS-свойством display равным block:

$.expr[':'].block = function(obj){
  if( $(obj).css('display') == 'block' )
    return true;
  else
    return false;
};
 
$('a:block'); // найдет все блочные ссылки

Организуем селектор, который будет искать элементы с заданным CSS-свойством display:

$.expr[':'].needDisplay = function(obj, index, meta){
  if( $(obj).css('display') == meta[3] )
    return true;
  else
    return false;
};
 
$('a:needDisplay("inline")'); // найдет все строчные ссылки
$('a:needDisplay("block")'); // найдет все блочные ссылки

В разделе Рецепты есть реализация селектора nth-of-type.