Find the closest ancestor element that has a specific class

Question

How can I find an element s ancestor that is closest up the tree that has a particular class  in pure JavaScript  For example  in a tree like so    lt div class  far ancestor  gt       lt div class  near ancestor  gt           lt p gt Where am I  lt  p gt       lt  div gt   lt  div gt    Then I want div near ancestor if I try this on the p and search for ancestor

User · Answer

Use element closest    https   developer mozilla org en-US docs Web API Element closest  See this example DOM    lt article gt     lt div id  div-01  gt Here is div-01      lt div id  div-02  gt Here is div-02        lt div id  div-03  gt Here is div-03 lt  div gt       lt  div gt     lt  div gt   lt  article gt    This is how you would use element closest   var el   document getElementById  div-03     var r1   el closest   div-02         returns the element with the id div-02  var r2   el closest  div div         returns the closest ancestor which is a div in div  here is div-03 itself  var r3   el closest  article  gt  div         returns the closest ancestor which is a div and has a parent article  here is div-01  var r4   el closest   not div        returns the closest ancestor which is not a div  here is the outmost article

User · Answer

Update  Now supported in most major browsers  document querySelector  p   closest   near ancestor     Note that this can match selectors  not just classes  https   developer mozilla org en-US docs Web API Element closest    For legacy browsers that do not support closest   but have matches   one can build selector-matching similar to  rvighne s class matching   function findAncestor  el  sel        while   el   el parentElement   amp  amp     el matches    el matchesSelector  call el sel         return el

User · Answer

Based on the the8472 answer and https   developer mozilla org en-US docs Web API Element matches here is cross-platform 2017 solution   if   Element prototype matches        Element prototype matches           Element prototype matchesSelector            Element prototype mozMatchesSelector            Element prototype msMatchesSelector            Element prototype oMatchesSelector            Element prototype webkitMatchesSelector            function s                var matches    this document    this ownerDocument  querySelectorAll s                   i   matches length              while  --i  gt   0  amp  amp  matches item i      this                 return i  gt  -1                function findAncestor el  sel        if  typeof el closest      function             return el closest sel     null            while  el            if  el matches sel                 return el                    el   el parentElement            return null

User · Answer

rvighne solution works well  but as identified in the comments ParentElement and ClassList both have compatibility issues  To make it more compatible  I have used   function findAncestor  el  cls        while   el   el parentNode   amp  amp  el className indexOf cls   lt  0       return el       parentNode property instead of the parentElement property indexOf method on the className property instead of the contains method on the classList property    Of course  indexOf is simply looking for the presence of that string  it does not care if it is the whole string or not  So if you had another element with class  ancestor-type  it would still return as having found  ancestor   if this is a problem for you  perhaps you can use regexp to find an exact match

User · Answer

This does the trick   function findAncestor  el  cls        while   el   el parentElement   amp  amp   el classList contains cls        return el      The while loop waits until el has the desired class  and it sets el to el s parent every iteration so in the end  you have the ancestor with that class or null   Here s a fiddle  if anyone wants to improve it  It won t work on old browsers  i e  IE   see this compatibility table for classList  parentElement is used here because parentNode would involve more work to make sure that the node is an element

User · Answer

This solution should work for IE9 and up  It s like jQuery s parents   method when you need to get a parent container which might be up a few levels from the given element  like finding the containing  lt form gt  of a clicked  lt button gt   Looks through the parents until the matching selector is found  or until it reaches the  lt body gt   Returns either the matching element or the  lt body gt   function parents el  selector       var parent container   el      do           parent container   parent container parentNode            while   parent container matches selector   amp  amp  parent container     document body         return parent container

[javascript] Find the closest ancestor element that has a specific class

Examples related to javascript

Examples related to html

Examples related to dom