发表新帖
发表新帖

[removed] How to get parent element by selector?

前端 未结
关注
9 465
忘掉有多难
忘掉有多难 2020-12-02 16:31

Example:


     ....
        
 
 <         


        
                      

              相关标签:
       

      
      
      

        

          9条回答        


        
    
                         				            
  • 
            
           
            
    
                              
                 
              
              
    
                
                  挽巷        
                
              
    
                            
    
                2020-12-02 17:04
              
    
            
    
            
    
                                                                       

    simple example of a function parent_by_selector which return a parent or null (no selector matches):
    


    function parent_by_selector(node, selector, stop_selector = 'body') {
  var parent = node.parentNode;
  while (true) {
    if (parent.matches(stop_selector)) break;
    if (parent.matches(selector)) break;
    parent = parent.parentNode; // get upper parent and check again
  }
  if (parent.matches(stop_selector)) parent = null; // when parent is a tag 'body' -> parent not found
  return parent;
};

    
                                                                        
    
                                                        
    
            
    
            
    
              
                
                0
              
                 
                
               讨论(0)
              
              
                                                   
              
    
                                                            
    
            
    
                      
          
    • 
          	          
  • 
            
           
            
    
                              
                 
              
              
    
                
                  [愿得一人]        
                
              
    
                            
    
                2020-12-02 17:08
              
    
            
    
            
    
                                                                       

    Here is simple way to access parent id
    


    document.getElementById("child1").parentNode;

    


    will do the magic for you to access the parent div.
    


    <html>
<head>
</head>
<body id="body">
<script>
function alertAncestorsUntilID() {
var a = document.getElementById("child").parentNode;
alert(a.id);
}
</script>
<div id="master">
Master
<div id="child">Child</div>
</div>
<script>
alertAncestorsUntilID();
</script>
</body>
</html>

    
                                                                        
    
                                                        
    
            
    
            
    
              
                
                0
              
                 
                
               讨论(0)
              
              
                                                   
              
    
                                                            
    
            
    
                      
          
    • 
          	          
  • 
            
           
            
    
                              
                 
              
              
    
                
                  天命终不由人        
                
              
    
                            
    
                2020-12-02 17:12
              
    
            
    
            
    
                                                                       

    Here's a recursive solution:
    


    function closest(el, selector, stopSelector) {
  if(!el || !el.parentElement) return null
  else if(stopSelector && el.parentElement.matches(stopSelector)) return null
  else if(el.parentElement.matches(selector)) return el.parentElement
  else return closest(el.parentElement, selector, stopSelector)
}

    
                                                                        
    
                                                        
    
            
    
            
    
              
                
                0
              
                 
                
               讨论(0)
              
              
                                                   
              
    
                                                            
    
            
    
                      
          
    • 
          	          
  • 
            
           
            
    
                              
                 
              
              
    
                
                  眼角桃花        
                
              
    
                            
    
                2020-12-02 17:13
              
    
            
    
            
    
                                                                       

    Finds the closest parent (or the element itself) that matches the given selector. Also included is a selector to stop searching, in case you know a common ancestor that you should stop searching at.
    


    function closest(el, selector, stopSelector) {
  var retval = null;
  while (el) {
    if (el.matches(selector)) {
      retval = el;
      break
    } else if (stopSelector && el.matches(stopSelector)) {
      break
    }
    el = el.parentElement;
  }
  return retval;
}

    
                                                                        
    
                                                        
    
            
    
            
    
              
                
                0
              
                 
                
               讨论(0)
              
              
                                                   
              
    
                                                            
    
            
    
                      
          
    • 
          	          
  • 
            
           
            
    
                              
                 
              
              
    
                
                  梦如初夏        
                
              
    
                            
    
                2020-12-02 17:14
              
    
            
    
            
    
                                                                       

    Using leech's answer with indexOf (to support IE)
    


    This is using what leech talked about, but making it work for IE (IE doesn't support matches):
    


    function closest(el, selector, stopSelector) {
  var retval = null;
  while (el) {
    if (el.className.indexOf(selector) > -1) {
      retval = el;
      break
    } else if (stopSelector && el.className.indexOf(stopSelector) > -1) {
      break
    }
    el = el.parentElement;
  }
  return retval;
}

    


    It's not perfect, but it works if the selector is unique enough so it won't accidentally match the incorrect element.
    
                                                                        
    
                                                        
    
            
    
            
    
              
                
                0
              
                 
                
               讨论(0)
              
              
                                                   
              
    
                                                            
    
            
    
                      
          
    • 
          	          
  • 
            
           
            
    
                              
                 
              
              
    
                
                  粉色の甜心        
                
              
    
                            
    
                2020-12-02 17:15
              
    
            
    
            
    
                                                                       

    I thought I would provide a much more robust example, also in typescript, but it would be easy to convert to pure javascript. This function will query parents using either the ID like so "#my-element" or the class ".my-class" and unlike some of these answers will handle multiple classes. I found I named some similarly and so the examples above were finding the wrong things. 
    


    function queryParentElement(el:HTMLElement | null, selector:string) {
    let isIDSelector = selector.indexOf("#") === 0
    if (selector.indexOf('.') === 0 || selector.indexOf('#') === 0) {
        selector = selector.slice(1)
    }
    while (el) {
        if (isIDSelector) {
            if (el.id === selector) {
                return el
            }
        }
        else if (el.classList.contains(selector)) {
            return el;
        }
        el = el.parentElement;
    }
    return null;
}

    


    To select by class name:
    


    let elementByClassName = queryParentElement(someElement,".my-class")
    


    To select by ID:
    


    let elementByID = queryParentElement(someElement,"#my-element")
    
                                                                        
    
                                                        
    
            
    
            
    
              
                
                0
              
                 
                
               讨论(0)
              
              
                                                   
              
    
                                                            
    
            
    
                      
          
    • 
          	          
   
                                  

        
        

          

            
            

              
              

            
    


                                 
              

            

                          
    

        
         

                
                

                  
                

                

                   看不清?
                

              

                                  

                    
   
                 
             
              
提交回复

            

          

        

      

       
      
    
    

          
 
     
 

        
热议问题