Что такое: nth() селектор псевдокласса в jQuery?

Каково определение псевдо-класса :nth?

Я не могу найти на нем какую-либо документацию jQuery или CSS, но она, кажется, существует:

var $list = $('<ul><li>1</li><li>2</li><li>3</li></ul>');

$list.find('li:nth(2)').text();

Возвращает: "3",

Пока:

 $list.find('li:nth-of-type(2)').text();
 $list.find('li:nth-child(2)').text();

оба возвращают "2"

Что это за псевдокласс? Может ли кто-нибудь указать мне на него документацию?

ОТВЕТЫ

Ответ 1

Что такое: nth() селектор?

В отличие от других ответов :nth() - это не селектор псевдокласса CSS.

Это малоизвестный позиционный селектор, используемый в Sizzle engine:

:nth: Находит элемент nth на странице.

Вы найдете приведенное выше определение здесь, в документации Github для Sizzle.

Почему он выбирает разные элементы для: nth-child()/: nth-of-type()?

Причина, по которой nth() и ваши другие селекторы выбирают разные элементы, состоит в том, что nth() является индексом с нулевым индексом, в то время как селектор CSS один индекссильные > селекторы.

Понятно, как это может сбивать с толку, поскольку большинство из них предположило бы, что nth() будет поддерживать некоторую согласованность с аналогичными псевдо-классами селекторов классов CSS, такими как nth-child() и nth-of-type(), однако, как уже упоминалось, они aren На самом деле это связано.

Итак,: nth() функциональность фактически ближе к: eq(), то?

Да. На самом деле кажется, что nth() в точности совпадает с eq():

Expr.pseudos["nth"] = Expr.pseudos["eq"];

Этот старый список рассылки (2007) подразумевает, что Джон Ресиг планировал удалить селектор :nth() из-за этого:

"Я обыскал группы, но, похоже, я не могу найти связанных разговоров это. Что, если таковые имеются, - это разница между использованием :eq(n) и :nth(n)? Я хотел бы знать, прежде чем начинать стандартизацию одного или Другие. Спасибо." - Мэтт Пеннер

"Они одинаковы, поэтому вы можете использовать то, что вы предпочитаете. Из jquery.js: nth: "m[3]-0==i", eq: "m[3]-0==i"" - Карл Сведберг

"Да... Мне, наверное, следовало бы укусить :nth()". - Джон Ресиг

Но, как вы заметили, удаление селектора :nth() никогда не материализовалось (по состоянию на 2013 год, во всяком случае).

Использование примера:

HTML:

<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>

JQuery

$('p:nth(2)').text(); // Returns 3 as zero-based index.
$('p:eq(2)').text(); // Returns 3 as zero-based index.
$('p:nth-child(2)').text(); // Returns 2 as one-based index.
$('p:nth-of-type(2)').text(); // Returns 2 as one-based index.

здесь версия jsFiddle.