Check if class exists somewhere in parent

I want to check if a class exsits somewhere in one of the parent elements of an element.

I don’t want to use any library, just vanilla JS.

In the examples below it should return true if the element in question resides somewhere in the childs of an element with “the-class” as the class name.

I think it would be something like this with jQuery:

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

So this returns true:

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

So does this:

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

…but this returns false:

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

Answer

You’ll have to do it recursively :

// returns true if the element or one of its parents has the class classname
function hasSomeParentTheClass(element, classname) {
    if (element.className.split(' ').indexOf(classname)>=0) return true;
    return element.parentNode && hasSomeParentTheClass(element.parentNode, classname);
}

Demonstration (open the console to see true)