Создание собственных селекторов 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.
