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

Question

[Valetorn]

Как найти родителя родителя родительского элемента? Есть блок (см.картинку), в нем есть кнопка '.product__shopcard-btn' мне нужно найти родителя родителя его родительского элемента т.е. '.product' (надеюсь выразился понятно). Способ element.parentNode.parentNode.parentNode работает, но бред же? Интересует чистый js без jquery.

Comments

[iBird Rose]

и о каком блоке речь и какого родителя искать?

[Kovalsky]

Sry, но всё же репорт, т.к. по запросу "js element get parent" можно найти всё что нужно.

[twobomb]

element.parentNode.parentNode?

[Valetorn]

iBird Rose, дописал)

[MrTimon]

Valetorn, ну если не нравиться element.parentNode.parentNode, то можно ф-цию написать чтото типа

function upTo(el, class) {

  while (el && el.parentNode) {
    el = el.parentNode;
    if (el.className && el.className.indexof(class)  > -1) {
      return el;
    }
  }

  return null;
}

и юзать
var parent = upTo(element, 'product');

[Valetorn]

MrTimon, К сожалению ваш код обращается к parentNode единожды. Есть мысли как обратится к parentNode несколько раз?

[MrTimon]

Valetorn, А, ну да. там неправильный выход el.className.indexof(class) > -1 это определит елемент где в классе есть class тоить для product__btn-container тоже сработает. Можно это заменить на el.className == class но тогда ф-ция будет работать только когда в елемента будет только один класс.

Answer 1

[tema_sun]

function findAncestor (el, cls) {
    while ((el = el.parentElement) && !el.classList.contains(cls));
    return el;
}

Comments

[Valetorn]

Спасибо

[Mikhail Osher]

Можно еще написать el.matches(cls), если cls будет селектором, а не названием класса.
Только я не помню, добавили ему поддержку нормальную или нет.

Answer 2

[Mikhail Osher]

Можно иначе подойти к вопросу.

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);

Comments

[Valetorn]

Спасибо. Сам бы долго думал)

[kulaeff]

Valetorn, не самый лучше вариант вы выбрали ответом.

[Valetorn]

kulaeff, первый который оказался рабочим)

[gleendo]

Valetorn, первый не значит лучший.

[kulaeff]

iamevg_, вы можете пометить несколько вариантов ответом, если что.

[gleendo]

kulaeff, видимо вы не тому написали...

[kulaeff]

iamevg_, упс

Answer 3

[gleendo]

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;
}

Comments

[kulaeff]

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

[Valetorn]

closest() не поддерживается IE

[Valetorn]

kulaeff, согласен, способ отличный, жаль не кроссбраузерный

[gleendo]

Valetorn, upd

[Robert Bl]

kulaeff, Кто-то еще IE пользуется?

[kulaeff]

Robert Bl, есть такие, к сожалению, и не всегда можно на них забить.

Answer 4

[Андрей Федосеев]

Если по клику на кнопку надо найти родителя N уровня, то проще повесить клик на этого самого родителя и ловить target. При клике на кнопку событие всплывет до этого самого родителя.
jsfiddle.net

Answer 5

[webtostep]

Самый простой вариант это Element.closest()

if (elem.closest('.ptoduct')) {
// выполняем функцию elem...
}