Задать вопрос
@Valetorn
Начинающий frontend разработчик

Как найти родителя родителя родителя в JavaScript?

Как найти родителя родителя родительского элемента? Есть блок (см.картинку), в нем есть кнопка '.product__shopcard-btn' мне нужно найти родителя родителя его родительского элемента т.е. '.product' (надеюсь выразился понятно). Способ element.parentNode.parentNode.parentNode работает, но бред же? Интересует чистый js без jquery.
a58257d8723e48309b0491394561bec8.png
  • Вопрос задан
  • 27254 просмотра
Подписаться 1 Оценить 7 комментариев
Решения вопроса 2
tema_sun
@tema_sun
function findAncestor (el, cls) {
    while ((el = el.parentElement) && !el.classList.contains(cls));
    return el;
}
Ответ написан
miraage
@miraage
Старый прогер
Можно иначе подойти к вопросу.

function getParent(elemSelector, parentSelector) {
  var elem = document.querySelector(elemSelector);
  var parents = document.querySelectorAll(parentSelector);
  
  for (var i = 0; i < parents.length; i++) {
    var parent = parents[i];
    
    if (parent.contains(elem)) {
      return parent;
    }
  }
  
  return null;
}

var result = getParent(
  '.product__shopcard-btn',
  '.product'
);

console.log(result);
Ответ написан
Пригласить эксперта
Ответы на вопрос 3
evgeniy8705
@evgeniy8705
Повелитель вселенной
document.querySelector(".product__shopcard-btn").closest(".product"); // <div class="product"></div>

let element = document.querySelector(".product__shopcard-btn");

while (!element.classList.contains("product")) {
  element = element.parentElement;
  
  if (!element) {
    break;
  }
}


const find = (node, className) => {
  while (node) {
    if (node.classList.contains(className)) {
      return node;
    } else {
      node = node.parentElement;
    }
  }

  return null;
}
Ответ написан
Если по клику на кнопку надо найти родителя N уровня, то проще повесить клик на этого самого родителя и ловить target. При клике на кнопку событие всплывет до этого самого родителя.
jsfiddle.net
Ответ написан
Комментировать
@webtostep
Самый простой вариант это Element.closest()

if (elem.closest('.ptoduct')) {
// выполняем функцию elem...
}
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы