проверить родителя у блока

Question

<div class="parent">
  <div>
   <span class="child"></span>
  </div>
</div>

Как проверить, что child находится в родительском блоке с классом parent?

Answer 1

В примере выше child НЕ находится в родителе с классом parent. Я привёл пример, в котором это утверждение будет истинным. Если это именно то, что нужно.

UPD:

Написал небольшую рекурсивную функцию. Можно вглубь искать родителя с нужным классом.

console.log(document.querySelector('.child').parentNode.classList.contains('parent'));
console.log(document.querySelector('.child2').parentNode.classList.contains('parent'));

function hasClassedParent(el, cssClass) {
  if(el.parentNode && el.parentNode.tagName !== 'BODY') {
    if(el.parentNode.classList.contains(cssClass)) {
      return el.parentNode;
    } else {
      return hasClassedParent(el.parentNode, cssClass);
    }
  } else {
    return null;
  }
}

console.log(hasClassedParent(document.querySelector('.child3'), 'parent')); // returns element
console.log(hasClassedParent(document.querySelector('.child4'), 'parent')); // returns null

<div class="parent">
  <div>
   <span class="child"></span>
  </div>
</div>

<div class="parent">
  <span class="child2"></span>
</div>

<div class="parent">
  <div id="f">
    <div id="s">
      <span class="child3"></span>
    </div>
  </div>
</div>

<div class="p">
  <div id="f">
    <div id="s">
      <span class="child4"></span>
    </div>
  </div>
</div>

Answer 2

Если имеется в виду родитель родителя:

let parentOfParent = document.querySelector('.child').parentNode.parentNode;

let isTheParent = parentOfParent?parentOfParent.classList.contains('parent'):false;

Если подниматься по ветке и искать родителя с классом parent,то надо рекурсивно подняться по дереву DOM

Answer 3

С jQuery

$(".child").parent().hasClass("parent") ? alert("Yes") : alert("No")

Answer 4

На чистом JS, без библиотек и рекурсивных функций.

Метод Element.closest() возвращает ближайший родительский элемент (или сам элемент), который соответствует заданному CSS-селектору или null, если таковых элементов вообще нет.

document.querySelector('.child').closest('.parent')
  ? alert('true')
  : alert('false');

<div class="parent">
  <div>
   <span class="child"></span>
  </div>
</div>

БЛОГ НА HUSL

проверить родителя у блока

Ответы (4 шт):

На чистом JS, без библиотек и рекурсивных функций.