Поиск ближайшего предка с определенным классом в JavaScript

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

Допустим, у нас есть следующий фрагмент кода HTML:

<div class="parent">
    <div class="child">
        <p>Текст</p>
    </div>
</div>

И мы хотим найти ближайший предок элемента p с классом parent. В этом случае, мы можем использовать чистый JavaScript без использования дополнительных библиотек.

Создадим функцию getClosest, которая будет принимать два параметра: элемент, для которого мы ищем предка (el), и класс предка, который мы ищем (cls).

function getClosest(el, cls) {
    while (el && el !== document) {
        if (el.classList.contains(cls)) {
            return el;
        }
        el = el.parentNode;
    }
    return null;
}

Эта функция работает следующим образом: она принимает элемент и класс в качестве параметров, затем перебирает предков данного элемента, начиная от него самого и поднимаясь выше по дереву элементов. Если функция находит элемент с заданным классом, она возвращает этот элемент. Если же достигает корневого элемента document и не находит нужного предка, возвращает null.

Это простое и эффективное решение позволяет легко найти ближайшего предка элемента с заданным классом, используя чистый JavaScript.