Check if any ancestor has a class using jQuery

javascript

jquery-methods

dom-traversal

javascript-performance

byNikita Barsukov·Aug 22, 2024

You can utilize jQuery's .closest() to swiftly check if any ancestor of a given element has a specific class:

if ($(element).closest('.desiredClass').length) {
    // If this log fires, Gandalf was right. You SHALL pass!
}

Here, just switch up element with your actual jQuery selector and .desiredClass with the class you're hankering for.

The `.parents()` method: Looking upstairs

In some scenarios, you might want to juxtapose the .parents() method:

if ($(element).parents('.checkClass').length) {
    // The truth is out there... and we've found it!
}

With this, you perform an efficient search of all ancestors - not just the closest one. Remember that this comes with a performance tag by rummaging all the way up to the root.

Keep it clean, buddy: Avoiding unnecessary `.parent()` calls

The $(element).parent().parent().... construct is about as scary as that crazy recursive function you wrote when you were a JavaScript novice. Instead, use .parents() for a neat traversal of multiple ancestors.

Checking your jQuery ID: Version compatibility

Are you rocking jQuery version 1.7.2 or newer? Good! That means you have all the power of .closest() and .parents() at your fingertips. Older jQuery versions might leave you hanging with compatibility issues.

`Closest` vs `parents`: Pick your weapon!

.closest() gets the nearest matching element (even the starting one), while .parents() exclusively aims for the ancestors, ignoring the starting point.

if ($(element).parents().hasClass('checkClass')) {
    // We've hit the jackpot!
}

But remember, hasClass() with parents() won't work, since .parents() brings back a whole jQuery collection, not a mere singleton.

Need CSS styling? Use `.parentClass:has(#myElem)`

You might want to apply some CSS depending on whether your chosen element resides inside a specific ancestor. While this is not the same as our DOM traversal, it's another trick worth remembering!

Searching multiple classes

Sometimes, you must look for more than one class on an ancestor. Use multiple classes in .closest() or .parents() like so:

if ($(element).closest('.classOne, .classTwo').length) {
    // An element with class 'classOne' or 'classTwo' was found
}

Special behavior: Closest vs Parents

.closest() and .parents() are siblings, not identical twins! Note the unique behavior: if a selector matches the starting element, .closest() includes it in the result, while .parents() doesn't give a hoot about the newbie and only looks at ancestors.

`.parent()` vs `.parents()`: Know your methods!

Ensure you understand the difference: .parent() gives you the immediate parent, while .parents() is the overachiever, climbing all the way up the tree.

Not a jQuery fan?

Also on board are native JavaScript methods like .matches():

let node = document.querySelector(element);
while (node && !node.matches('.targetClass')) {
    node = node.parentElement;
}
if (node) {
    // You hit the DOM traversal jackpot, sans jQuery! 
}