Заданные условные элементы в своих родителях

Материал из JQuery

Перейти к: навигация, поиск
:nth-of-type(arg)1.9  :nth-last-of-type(arg)1.9

Различия двух представленных селекторов заключается только в том, что :nth-last-of-type() рассматривает позиции элементов в обратном порядке (т. е. с конца).

:nth-of-type() — фильтрующий селектор (отфильтровывает элементы, выбранные с помощью предшествующей части селектора). Фильтрация происходит по следующему принципу:

  • Элементы, выбранные по предшествующей части селектора разделяются на группы по общему родителю.
  • Внутри каждой группы будут выбираться те из элементов, которые находятся в своей группе на определенных позициях (например четных, или кратных трем, или просто первый встреченный элемент). Эти элементы и станут результатом работы селектора :nth-of-type().

Стоит иметь ввиду, что нумерация позиций начинается не с 0, а с 1!

Параметр arg может принимать следующие значения:

  • index — элементы, находящиеся в своей группе на позиции index.
  • even — элементы, находящиеся в своей группе на четных позициях.
  • odd — элементы, находящиеся на нечетных позициях.
  • equation — выражение, описывающее номер позиции элемента. Выражение должно быть целочисленным и зависеть от n. Например 2n+1 соответствует элементам с позициями 1, 3, 5 и далее. 3n+2 соответствует элементам с позициями 2, 5, 8. (чтобы это понять, нужно, вместо n подставлять значения 0, 1, 2 и далее).

Примеры использования:

$('div:nth-of-type(3)') вернет каждый третий div-элемент, встреченный в своем непосредственном предке.
$('div:nth-of-type(odd)') вернет каждый нечетный div-элемент, встреченный в своем непосредственном предке.
$('div:nth-of-type(even)') вернет каждый четный div-элемент, встреченный в своем непосредственном предке.
$('div:nth-of-type(2n+3)') вернет каждый 2n+3-й div-элемент (5, 7, 9...), встреченный в своем непосредственном предке.

Пример 1

Продемонстрируем как работает :nth-last-of-type() с разными параметрами:

Ссылки

Поисковые ключи:
  • заданные элементы в своих предках
  • nth-of-type()
  •  :nth-of-type()
Поисковые ключи:
  • заданные элементы в своих предках
  • nth-last-of-type()
  •  :nth-last-of-type()