jQuery: выбор ближайшего предыдущего родителя по классу

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

Чтобы найти ближайший предшествующий элемент с определённым классом с использованием jQuery, примените методы .prevAll('.yourClass').first(). Воспользуйтесь следующим синтаксисом:

var closestSibling = $('#element').prevAll('.desiredClass').first();

Замените '#element' идентификатором интересующего вас элемента и '.desiredClass' тем классом, который вы ищете. Данный код поможет вам быстро обнаружить искомый элемент.

Производительность и нагрузка на CPU

Скорость работы вашего скрипта напрямую связана с количеством элементов DOM, которые ему придётся обработать. Использование .prevAll('.yourClass').first() может вызвать повышенную нагрузку на CPU, если вам приходится перебирать много элементов. Ведь prevAll() проводит анализ всех элементов, идущих перед выбранным.

Для повышения производительности при работе с большими списками рекомендуется использование комбинации prevUntil() и last(). Этот подход прерывает обход, как только обнаруживает нужный селектор, а last() возвращает первый найденный элемент с классом .yourClass:

var closestSibling = $('#element').prevUntil(':not(.yourClass)').last();

Этот способ более эффективен и нагружает процессор в меньшей степени.

Учёт динамических классов

Современный код должен быть адаптивным, подобно его среде применения. При работе со сменяющимися классами целесообразно динамически формировать строку селектора:

var className = 'dynamicClass';
var closestSibling = $('#element').prevAll('.' + className).first();

Такой подход позволяет применять код в ситуациях с переменными названиями классов.

Обработка ситуаций в реальном времени

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

if (closestSibling.length) {
    // Элемент найден
} else {
    // Элемент не найден
}

Такие проверки делают код устойчивым к неожиданным ситуациям. Рассмотрите это как дополнительный бонус.

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

Шаги, согласно которым работает код:

1. Выход из текущего элемента.
2. Обратный проход, проверка предшествующих элементов.
3. Остановка при обнаружении искомого класса.

prevAll() вместе с first() работают следующим образом:

$('.current-element').prevAll('.target-class').first();

Иллюстрация процесса:

Прошлые соседи: [🔲, 🔲, 🟩, 🔲, 🟩(class='target-class'), 🔲, 🔲]
Ближайшее совпадение: 🟩✔️ ('🟩', ближайший к '📍' справа)

И вот, вы достигли цели! 😎

Разрушаем мифы: prevAll против prev

Когда требуется проверить только одного прямого предшественника, используйте prev():

var closestSiblingDirect = $('#element').prev('.yourClass');

Этот метод сконцентрирован исключительно на непосредственном предшествующем элементе.

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

1. .prev() | Документация API jQuery — изучите метод поиска предшествующих элементов.
2. .closest() | Документация API jQuery — разберитесь в различиях между методами closest() и prev().
3. Селекторы jQuery — освоите применение селекторов jQuery.
4. .prevUntil() | Документация API jQuery — дополнительная информация о методе поиска предшествующих элементов.
5. Обход DOM | Учебный центр jQuery — погрузитесь в работу с DOM.
6. Свойство элемента: classList – Web API | MDN — советуем освоить JavaScript для работы с классами.