Одна из самых потрясающих вещей в jQuery — это движок селекторов. Доступ к элементам DOM используюя селекторы в jQuery становиться довольно простой задачей, еще и потому, что большинство селекторов используют те же выражения что и селекторы в CSS. Это то что веб-дизайнеры НЕ программисты могут легко усвоить.
Это статья — упражение в создании произвольного слектора, вы можете её использовать, как руководство по созданию своего собственного селектора.
Создание «кастомных» селекторов в jQuery не такое уж и сложное дело. Есть прекрасная статья на эту тему.
Итак, моя цель была в выборе элементов с определеным шагом, или в некоторых случаях мне также нужно было начинать выборку с n-ого элемента, а не с первого…
Вот окончательный код:
Первый параметр 3 показываает шаг, а второй параметр 5 показывает точку начала выборки. Параметры разделяются запятой.
От переводчика: примеры проверены — вроде бы все работает как надо — какие проблемы у автора не до конца понятно.
api.jquery.com/nth-child-selector
Если вам нужен отступ, просто вставьте в равенство +отступ.
Ответ: Эта статья просто пример по созданию произвольного селектора и ничего больше. Спасибо.
Это статья — упражение в создании произвольного слектора, вы можете её использовать, как руководство по созданию своего собственного селектора.
Чего я хотел добиться?
Вначале, мне нужно было получить каждый третий элемент в коллекции. (я собирался применить отдельный стиль для каждого третьего элемента). Я попытался написать простой скрипт для решения этой задачи, но затем подумал, почему нельзя сделать это в виде селктора.Создание «кастомных» селекторов в jQuery не такое уж и сложное дело. Есть прекрасная статья на эту тему.
Итак, моя цель была в выборе элементов с определеным шагом, или в некоторых случаях мне также нужно было начинать выборку с n-ого элемента, а не с первого…
Вот окончательный код:
jQuery.expr[':'].step = function(node,index,meta){
var $index = index;
var $meta = meta[3].toString().split(',');
var $step = parseInt($meta[0]);
var $start = ($meta.length > 1) ? $meta[1] : 0;
if ($start != 0) $start -= 1;
return ( ( ($index-$start) / $step ) == Math.floor( ( ($index-$start) / $step ) ) && ( ($index-$start) >= 0 ) );
};
Разберем шаг за шагом
Чтобы начать использовать этот силектор мы должны, конечно же, подключить jQuery и файл jquery.step.js, который можно найти и скачать тут.<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.step.js"></script>
Step-селектор использует обычный для jQuery способ для выборки элементов. Вот пример для выборки каждого третьего элемента.$('ul#one li:step(3)').css('clear','left');
Как упоминалось этот селектор можно применять для выборки с определенного элемента. Допустим, если вы хотите выбрать каждый 3-ий элемент начиная с 5-го это будет выглядеть как то так:$('ul#two li:step(3,5)').addClass('alt');
Первый параметр 3 показываает шаг, а второй параметр 5 показывает точку начала выборки. Параметры разделяются запятой.
Практическое применение
Если у вас есть галерея с превьюшками с float=left и вы хотите сбросить обтекание у каждой 4-ой превьюшке. Или вы применяете специальный класс для кажого 10-го элемента списка для визуальной группировки. Или вы можете вставить рекламу каждые 5 новостей, но только не перед первой… и т.д.Важные замечания
Есть некоторые проблемы, которые я не смог решить. У меня не получилось заставить работать правильно селектор, когда в нем содержатся классы. Вот примерно с таким селектором у меня возникли проблемы:$('ul.one li:step(3)').css('clear','left');
Если у вас есть решение — поделитесь и мы все будем вам благодарны.От переводчика: примеры проверены — вроде бы все работает как надо — какие проблемы у автора не до конца понятно.
Из комментариев к оригиналу:
Уже есть простой селектор в самом jQuery:api.jquery.com/nth-child-selector
Если вам нужен отступ, просто вставьте в равенство +отступ.
Ответ: Эта статья просто пример по созданию произвольного селектора и ничего больше. Спасибо.