Advanced Search

Results 1 to 4 of 4

Thread: Finding ID of parent tag (i.e. div or span, etc) that surrounds a control or tag

  1. #1
    Join Date
    Mar 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Finding ID of parent tag (i.e. div or span, etc) that surrounds a control or tag

    I'm looking for a way to get the id of a parent tag that a control or tag is nested inside. For example, I want to find the id of the div tag that a hyperlink control is nested inside:

    Code:
    <div id="divTest">
         <a id="aTest" href="test.htm">Test</a>
    </div>
    I know how to get the id of the control itself (this) but is there a way to get the ids of parent tags that it's nested within? And if so, can you get more than just the direct parent above it, or could you possibly step through the whole nest of items? The latter would be most ideal...

    Thanx in advance for any replies!

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,674
    Thanks
    43
    Thanked 3,125 Times in 3,091 Posts
    Blog Entries
    12

    Default

    To get the immediate parent, you can use:

    Code:
    var pid=this.parentNode.id;
    However, if there is no id or no parent node, there will be problems. So, you might want to do:

    Code:
    if (this.parentNode&&this.parentNode.id)
    var pid=this.parentNode.id;
    This also makes 'walking' the nodes looking for id's a bit tricky but, it can be done. It would be helpful to know which parent or id you are looking for, why you are looking for it and, what sorts of things could be there when you go looking.

    In one scenario, we could be looking for the parent node with a specified id, this would do that:

    Code:
    function find_pid(el, id){
    var p=el;
    while(p=p.parentNode;)
    if(p.id&&p.id==id)
    return p;
    return null;
    }
    You can feed it the child and the id you are looking for. If the child has a parent with the specified id, it will return that parent, otherwise, it will return null.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Feb 2007
    Posts
    293
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    If you want to get everything to the top of the file, you could also try some variation of this.

    Code:
    <html>
    <head>
    </head>
    <body id="body">
    
    
    <script>
    function alertAncestorsUntilID(node, id) {
    var parent = node;
    while(parent.id != id) {
    parent = parent.parentNode;
    alert(parent.id);
    }
    }
    </script>
    
    <div  id="master1">
    <div id="master2">
    <a href="#">Master div</a>
    <div id="child1"><a href="#">Child div 1</a></div>
    <div id="child2"><a href="#">Child div 2</a></div>
    <div id="child3"><a href="#">Child div 3</a></div>
    <div id="child4"><a href="#">Child div 4</a></div>
    
    </div>
    </div>
    
    
    <script>
    alertAncestorsUntilID(document.getElementById("child1"));
    </script>
    
    
    </body>
    </html>

  4. #4
    Join Date
    Mar 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Beautiful!

    AWESOME!!! Thank you so much you guys!

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •