Как стать автором
Обновить

jQuery:step() селектор произвольной позиции

Время на прочтение 2 мин
Количество просмотров 10K
Автор оригинала: Alen Grakalic
Одна из самых потрясающих вещей в jQuery — это движок селекторов. Доступ к элементам DOM используюя селекторы в jQuery становиться довольно простой задачей, еще и потому, что большинство селекторов используют те же выражения что и селекторы в CSS. Это то что веб-дизайнеры НЕ программисты могут легко усвоить.
Это статья — упражение в создании произвольного слектора, вы можете её использовать, как руководство по созданию своего собственного селектора.

Чего я хотел добиться?

Вначале, мне нужно было получить каждый третий элемент в коллекции. (я собирался применить отдельный стиль для каждого третьего элемента). Я попытался написать простой скрипт для решения этой задачи, но затем подумал, почему нельзя сделать это в виде селктора.
Создание «кастомных» селекторов в 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
Если вам нужен отступ, просто вставьте в равенство +отступ.

Ответ: Эта статья просто пример по созданию произвольного селектора и ничего больше. Спасибо.
Теги:
Хабы:
+23
Комментарии 38
Комментарии Комментарии 38

Публикации

Истории

Ближайшие события

Московский туристический хакатон
Дата 23 марта – 7 апреля
Место
Москва Онлайн
Геймтон «DatsEdenSpace» от DatsTeam
Дата 5 – 6 апреля
Время 17:00 – 20:00
Место
Онлайн