В процессе работы с документами 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.
Добавить комментарий