Проверка наличия класса у любого предка в jQuery

Быстрый ответ

Чтобы проверить, имеется ли конкретный класс среди предков элемента в jQuery, применим метод .closest():

if ($(element).closest('.desiredClass').length) {
    // Если условие выполнилось, то класс обнаружен – ваш код работает!
}

Вместо element вставьте ваш jQeury селектор, а вместо .desiredClass – нужный класс.

Метод .parents(): Осмотр окружения

Метод .parents() полезен для массового поиска по всем предкам:

if ($(element).parents('.checkClass').length) {
    // Обнаружено родственное совпадение!
}

Учтите: метод требует больше ресурсов, так как просматривает все уровни предков до корневого элемента.

Заботимся о качестве кода: Избегаем лишних вызовов .parent()

Злоупотребление последовательными вызовами типа .parent().parent().... порождает сложную структуру, которую можно избежать, воспользовавшись .parents(), осуществляющим последовательный поиск среди предков.

Проверка версии jQuery: Вопросы совместимости

Важно гарантировать использование jQuery начиная с версии 1.7.2 для корректного функционирования методов .closest() и .parents(). Иначе могут возникнуть проблемы совместимости.

Closest против parents: Выбираем подходящий метод

Метод .closest() найдет ближайший элемент с соответствующим классом, включая текущий элемент. Метод .parents(), в свою очередь, нацелен исключительно на поиск среди предков.

if ($(element).parents().hasClass('checkClass')) {
    // Цель достигнута!
}

Помните, что связка hasClass() с parents() не даст результата, посольку .parents() возвращает коллекцию элементов jQuery.

Хотите стилизовать CSS? Попробуйте .parentClass:has(#myElem)

Родительскому элементу можно установить стили в зависимости от наличия или отсутствия дочернего элемента при помощи CSS-свойства .parentClass:has(#myElem).

Визуализация

Представьте, что ваш jQuery селектор – это детектив, ищущий в замке (DOM-дереве) затаившееся сокровище (класс).

🔍 Начало поиска (ваш jQuery селектор)
|
🚪 Вход в другую комнату (родительский элемент)
|
🔄 Осмотр комнат (поиск среди предков)
|
🕵️‍♂️ Обнаружена комната со сейфом! (предок с нужным классом)

Запись кода выглядит следующим образом:

if ($('.yourSelector').parents('.yourClass').length) {
    // 🎉 Класс найден!
} else {
    // 🕵️‍♂️ Продолжаем поиски...
}

Поиск по нескольким классам

Если требуется проверить принадлежность предка к нескольким классам, объедините их так:

if ($(element).closest('.classOne, .classTwo').length) {
    // Найден элемент с классом 'classOne' или 'classTwo'
}

Особенности: Closest против Parents

Существует важная особенность: если текущий элемент удовлетворяет селектору, метод.closest() включает его в выборку, в отличие от .parents(), который осуществляет поиск только среди предков.

.parent() против .parents(): Понимаем разницу

Важно различать методы .parent(), возвращающий непосредственного родителя, и .parents(), просматривающий все уровни предков.

Не любите jQuery?

Для выполнения этой задачи без jQuery можно использовать нативный JavaScript-метод matches():

let node = document.querySelector(element);
while (node && !node.matches('.targetClass')) {
    node = node.parentElement;
}
if (node) {
    // Мы нашли, что искали, и без применения jQuery! 
}

Если вы стремитесь улучшить производительность, научиться использовать нативные JavaScript-методы полезно.

Полезные материалы

1. .closest() | Документация jQuery API – Детальное руководство по методу .closest() от авторов jQuery.
2. javascript – Получение родительского элемента по селектору – Stack Overflow – Stack Overflow предлагает полезное обсуждение поиска классов у предков.
3. .parents() | Документация jQuery API – jQuery документация объясняет, как проверять классы предков при помощи метода .parents().
4. Element: matches() метод – Web APIs | MDN – На MDN можно найти сведения о методе .matches() для сравнения элементов DOM без обращения к jQuery.
5. Возможно, вам не нужен jQuery – Альтернативные возможности нативного JavaScript вместо использования jQuery.
6. Обход DOM-дерева | Учебник по jQuery – Обучающие материалы по обходу и манипуляции DOM-дерева, используя jQuery.
7. .is() | Документация jQuery API – Дополнительная информация о методе .is() для проверки, соответствуют ли элементы определённым селекторам или классам.