Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    Oct 2005
    Posts
    196
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Getting the parent id of a clicked linked?

    So I have the following HTML:

    Code:
    <div id = "m0">
    	<a href = "">
    	<h3>
    		<img src = "plus-small.png" alt = "" />Bank</h3></a>
    
    			<ul>
    				<li><a href = "javascript: a()">Scotiabank</a> (6)</li>
    				<li><a href = "javascript: a()">Bank of Montreal</a> (3)</li>
    				<li><a href = "javascript: a()">CIBC</a> (3)</li>
    
    				<li><a href = "javascript: a()">National Bank of Canada</a> (2)</li>
    				<li><a href = "javascript: a()">Royal Bank</a> (3)</li>
    				<li><a href = "javascript: a()">TD Bank</a> (6)</li>
    			</ul>
    
    </div>
    I'm trying to make it so when you click on of those links above, an alert window will pop up showing 'm0'. Basically, I'm trying to get the parent id.

    I've tried playing with parentNode, but can't seem to get anything going.

    Any ideas?

    Thanks!

  • #2
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    parentNode is the first (the direct) parent. You may extend the reference up to the tree. But you need a start object to perform the up/down tree climbing, and that could be the self reference this.

    In your case:
    Code:
    <li><a href="#" onclick="alert(this.parentNode.parentNode.parentNode.id);return false">Scotiabank</a> (6)</li>
    this is the self reference, the element <a>
    parentNode is the parent <li>
    parentNode is the <ul>, the parent of the <li>
    parentNode is the <div>, the parent of the <ul>
    Last edited by Kor; 12-14-2006 at 07:26 AM.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #3
    New to the CF scene
    Join Date
    Mar 2005
    Location
    Toronto
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    If you want to assign a function to every link on the page dynamically, you could use the following code:

    function assignClickEvent(){
    var links = document.links;
    for(var i =0; i < links.length; i++)
    links[i].onclick = findDivId;
    }

    function findDivId(e){
    var targ;
    if (!e) var e = window.event;
    if (e.target) targ = e.target;
    else if (e.srcElement) targ = e.srcElement;
    alert(targ.parentNode.parentNode.parentNode.id);
    return false;
    }

    window.onload =assignClickEvent;

  • #4
    Senior Coder
    Join Date
    Nov 2006
    Posts
    1,000
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I figured you might want the closest ancestor with an id.

    So here's my attempt too.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
      <head>
        <title>Find Parent Id</title>
        <script type="text/javascript">
          function a(o) {
            while (o && o.id == "") {
              o = o.parentNode;
            }
    
            if (!o.id) {
              alert("No parent has an id");
            } else {
              alert(o.id);
            }
          }
        </script>
      </head>
      <body>
        <div id="m0">
          <a href = ""><h3><img src = "plus-small.png" alt = "" />Bank</h3></a>
    
          <ul>
            <li><a href="javascript:;" onclick="a(this);">Scotiabank</a> (6)</li>
            <li><a href="javascript:;" onclick="a(this);">Bank of Montreal</a> (3)</li>
            <li><a href="javascript:;" onclick="a(this);">CIBC</a> (3)</li>
    
            <li><a href="javascript:;" onclick="a(this);">National Bank of Canada</a> (2)</li>
            <li><a href="javascript:;" onclick="a(this);">Royal Bank</a> (3)</li>
            <li><a href="javascript:;" onclick="a(this);">TD Bank</a> (6)</li>
          </ul>
    
        </div>
      </body>
    </html>
    david_kw
    Last edited by david_kw; 12-14-2006 at 06:23 PM. Reason: fixed typo

  • #5
    Regular Coder
    Join Date
    Oct 2005
    Posts
    196
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Very nice, everyones input was very useful.

    Thanks!


  •  

    Posting Permissions

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