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

Материал из JQuery

Версия 17:15, 6 ноября 2013

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

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

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

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

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

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

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

Пример 1

Отметим мужчин, стоящих в очереди на четных местах (элементы класса men, стоящие в элементах с классом queue (очередь) на четных позициях):

	
~lt~!doctype html~gt~
~lt~html lang="en"~gt~
~lt~head~gt~
  ~lt~meta charset="utf-8"~gt~
  ~lt~title~gt~nth-last-of-type demo~lt~/title~gt~
  ~lt~style~gt~
  div {
    float: left;
  }
  span {
    color: blue;
  }
  ~lt~/style~gt~
  ~lt~script src="http://code.jquery.com/jquery-1.9.1.js"~gt~~lt~/script~gt~
~lt~/head~gt~
~lt~body~gt~
 
~lt~div~gt~
  ~lt~ul~gt~
    ~lt~li~gt~John~lt~/li~gt~
    ~lt~li~gt~Karl~lt~/li~gt~
    ~lt~li~gt~Adam~lt~/li~gt~
  ~lt~/ul~gt~
~lt~/div~gt~
~lt~div~gt~
  ~lt~ul~gt~
    ~lt~li~gt~Dan~lt~/li~gt~
  ~lt~/ul~gt~
~lt~/div~gt~
~lt~div~gt~
  ~lt~ul~gt~
    ~lt~li~gt~Dave~lt~/li~gt~
    ~lt~li~gt~Rick~lt~/li~gt~
    ~lt~li~gt~Timmy~lt~/li~gt~
    ~lt~li~gt~Gibson~lt~/li~gt~
  ~lt~/ul~gt~
~lt~/div~gt~
 
~lt~script~gt~
$( "ul li:nth-last-of-type(2)" ).append( "~lt~span~gt~ - 2nd to last!~lt~/span~gt~" );
~lt~/script~gt~
 
~lt~/body~gt~
~lt~/html~gt~

Ссылки

• Остальные селекторы по расположению элементов в своих родителях
• Список всех селекторов
• $( ) — функция jQuery