javascript - 检查父类中是否存在类

Question

我想检查某个元素的父元素之一中是否存在某个类。

我不想使用任何库，只想使用普通 JS。

在下面的示例中，如果相关元素位于以“the-class”作为类名的元素的子元素中的某个位置，则应返回 true。

我认为 jQuery 会是这样的:

if( $('#the-element').parents().hasClass('the-class') ) {
    return true;
}

所以这返回 true:

<div>
    <div class="the-class">
        <div id="the-element"></div>
    </div>
</div>

这也是:

<div class="the-class">
    <div>
        <div id="the-element"></div>
    </div>
</div>

...但这返回 false:

<div>
    <div class="the-class">
    </div>
    <div id="the-element"></div>
</div>

Answer 1

您可以使用 Element 的 closest() 方法遍历 Element 的父级(指向文档根)，直到找到与提供的选择器字符串匹配的节点。将返回自身或匹配的祖先。如果不存在这样的元素，则返回 null。

可以将返回值转换为 bool 值

const el = document.getElementById('div-03');

const r1 = el.closest("#div-02");  
console.log(Boolean(r1));
// returns the element with the id=div-02

const r2 = el.closest("#div-not-exists");
console.log(Boolean(r2));

<article>
  <div id="div-01">Here is div-01
    <div id="div-02">Here is div-02
      <div id="div-03">Here is div-03</div>
    </div>
  </div>
</article>