jQuery: Использование псевдоклассов CSS

Иногда при написании скриптов на jQuery хочется отобрать первые, последние или промежуточные элементы с помощью удобных выражений вроде :first, :last, :even, :odd. Однако эти псевдоклассы ведут себя особым образом и могут приводить к неожиданностям, если не соблюдать осторожность.

Какие бывают псевдоклассы?

jQuery предоставляет ряд специальных фильтров для выбора конкретных элементов из набора:

:first — выбирает первый элемент из набора.
:last — выбирает последний элемент из набора.
:even — выбирает элементы с чётными индексами (начиная с нуля).
:odd — выбирает элементы с нечётными индексами.
:eq(N) — выбирает элемент с номером N (также начинается с нуля).
:gt(N) — выбирает элементы с номерами большими, чем N.
:lt(N) — выбирает элементы с номерами меньшими, чем N.

Когда использовать псевдоклассы?

Псевдоклассы удобно использовать в двух ситуациях:

Непосредственно в селекторе jQuery
Это самый простой и быстрый способ выбора элементов. Просто напиши псевдокласс рядом с основным селектором, и jQuery автоматически подберёт нужный элемент:

ВыделитьjQuery

$('.item:first').css('background-color', 'yellow');

Внутри методов jQuery, принимающих селекторы
Часто полезно сочетать псевдоклассы с методами jQuery, такими как .find(), .filter() и .not(). Например:

ВыделитьjQuery

$(this).find('li:first').addClass('active');

Опасные зоны: Когда псевдоклассы НЕ РАБОТАЮТ?

Несмотря на свою полезность, псевдоклассы не всегда применимы. Их нельзя использовать в тех методах jQuery, которые ожидают обычный CSS-селектор без дополнений.

Особенно опасно использовать псевдоклассы с методами, предназначенными для поиска ближайших родственников:

.parents() — метод ожидания простой CSS-селектор вида .block, и псевдокласс сломает его работу.
.children(), .siblings(), .next(), .prev() — аналогично, они хотят простой селектор без усложнений.

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

ВыделитьjQuery

$(this).parents('.block:first').find('li').removeClass('active');

В этом примере псевдокласс испортит выполнение метода .parents(), так как он ожидал простой селектор.

Альтернативы псевдоклассам

Если псевдокласс неуместен или нежелателен, можно обратиться к специальным методам jQuery, которые решают схожие задачи:

.first() — выбирает первый элемент из набора.
.last() — выбирает последний элемент из набора.
.slice(start, end) — разрезаем набор элементов, выбрав диапазон индексов.
.eq(index) — выбирает элемент по номеру индекса.

Пример замены псевдокласса

ВыделитьjQuery

$('.item').first().css('background-color', 'yellow');

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

Рассмотрим несколько примеров, иллюстрирующих разные сценарии:

1. Отображение фона только у первого элемента

ВыделитьjQuery

$('.item:first').css('background-color', 'yellow');

2. Скрытие последнего элемента списка

ВыделитьjQuery

$('ul li:last').hide();

3. Применение стилей к каждому второму элементу таблицы

ВыделитьjQuery

$('tr:odd').css('background-color', '#fafafa');

4. Выбор третьего элемента из набора

ВыделитьjQuery

$('.list-item:eq(2)').addClass('special');

Заключение

Использование псевдоклассов эффективно и полезно, но соблюдай осторожность, особенно с методами, которые ждут обычный CSS-селектор.
Замена псевдоклассов методами вроде .first(), .last() и .eq() может повысить надёжность и гибкость твоего кода.
Помни, что чистота и простота повышают надежность проектов.

Теперь ты умеешь грамотно применять псевдоклассы и обходить ловушки!