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 8 of 8
  1. #1
    New Coder
    Join Date
    May 2004
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Find links and desired parentNode

    I have been working on a script to find links and pass on analytical data when clicked. The first part I can do, but I'm struggling to find a way to tidy way to get desired parent ID. The idea is to find parent of clicked link, if it is undesired (such as child UL or empty) then find next parent up until we find an ID. All my links will be within ID parent, except for those immediately children of body (which will use body ID). These links are generated in a custom CMS so body tag always have an ID and so do UL and DIVs that will contain links ... some client-generated links could be created without ID hence why I am having the body as a catchall.

    Anyways, if we have something like DIV > UL > LI > UL > LI > A and I click A, I want href or title to be passed along with top-most UL or DIV ID to be passed too.

    The general parent ID works this way:

    Code:
    		if (targ.parentNode.id != '') {
    	        dad = targ.parentNode;
    	    } else if (targ.parentNode.parentNode.id != '') {
    	        dad = targ.parentNode.parentNode;
    	    } else if (targ.parentNode.parentNode.parentNode.id != '') {
    	        dad = targ.parentNode.parentNode.parentNode;
    	    } else if (targ.parentNode.parentNode.parentNode.parentNode.id != '') {
    	        dad = targ.parentNode.parentNode.parentNode.parentNode;
    	    }
    But I am trying to mimize the code so that I can start to add some exclusions and/or other intelligence to handle what ID should be used, and it isn't quite working:

    Code:
    	    while(targ.parentNode && targ.parentNode.id != '' && tagx.indexOf(targ.parentNode.tagNode) == -1) {
    	        targ = targ.parentNode;
    	    }
    	    dad = targ;
    The full page code to test might help you see what I am doing:

    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 assignClickEvent(){
    		var links = document.links;
    		for(var i =0; i < links.length; i++){
    			links[i].onclick = findDivId;
    		}
    	};
    	function findDivId(e) {
    	    var targ;
    	    var dad;
    	    var idx = new Array('nav');
    	    var tagx = new Array('BODY','P','LI','A');
    	    if (!e){
    	        var e = window.event;
    	    }
    	    if (e.target){
    	        targ = e.target;
    	    } else if (e.srcElement) {
    	        targ = e.srcElement;
    	    }
    
    
    	    while(targ.parentNode && targ.parentNode.id != '' && tagx.indexOf(targ.parentNode.tagNode) == -1) {
    	        targ = targ.parentNode;
    	    }
    	    dad = targ;
    
    
    		/*
    		if (targ.parentNode.id != '') {
    	        dad = targ.parentNode;
    	    } else if (targ.parentNode.parentNode.id != '') {
    	        dad = targ.parentNode.parentNode;
    	    } else if (targ.parentNode.parentNode.parentNode.id != '') {
    	        dad = targ.parentNode.parentNode.parentNode;
    	    } else if (targ.parentNode.parentNode.parentNode.parentNode.id != '') {
    	        dad = targ.parentNode.parentNode.parentNode.parentNode;
    	    }
    	    */
    
    
     	    if(dad){
    	    	//if(idx.indexOf(dad.id) == -1){
    				alert(dad.id + ' ' + dad.tagName + ' ' + dad.href);
    			//}
    	    };
    	    return false;
    	};
    	window.onload = assignClickEvent;
    </script>
    </head>
    <body id="page">
    
    	<div id="main">
    	
    		<h2>Header</h2>
    		
    		<div>
    		
    		<ul>
    			<li><a href="scot.html">Scotiabank</a> (6)</li>
    			<li><a href="mon.html">Bank of Montreal</a> (3)</li>
    			<li><a href="cibc.html">CIBC</a> (3)</li>
    			<li><a href="canada.html">National Bank of Canada</a> (2)</li>
    		</ul>
    	
    		</div>
    
    		<h2>Main</h2>
    
    		<ul id="nav">
    			<li><a href="scot.htm">Scotiabank</a> (6)
    				<ul id="nav-sub">
    					<li id="cib-sub"><a href="scot.html">Scotiabank</a> (6)</li>
    					<li><a href="mon.html">Bank of Montreal</a> (3)</li>
    					<li><a href="canada.html">National Bank of Canada</a> (2)</li>
    				</ul></li>
    			<li><a href="mon.html">Bank of Montreal</a> (3)</li>
    			<li><a href="cibc.html">CIBC</a> (3)</li>
    			<li><a href="canada.html">National Bank of Canada</a> (2)</li>
    		</ul>
    	
    	</div>
    	
    	
    	
    	<h2>Footer</h2>
    	
    	<ul>
    		<li><a href="scot.html">Scotiabank</a> (6)</li>
    		<li><a href="mon.html">Bank of Montreal</a> (3)</li>
    		<li><a href="cibc.html">CIBC</a> (3)</li>
    		<li><a href="canada.html">National Bank of Canada</a> (2)</li>
    	</ul>
    
    </body>
    </html>

  • #2
    New Coder
    Join Date
    May 2004
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I'm not any closer with my while loop, but my original if else approach is getting closer:

    Code:
    		if(targ.parentNode.tagName == 'BODY'){
    	      	dad = targ.parentNode;
    	        test = 0;
    		} else if (targ.parentNode.id != '' && tagx.indexOf(targ.parentNode.tagNode) !== -1) {
    	        dad = targ.parentNode;
    	        test = 1;
    	    } else if (targ.parentNode.parentNode.id != '' && tagx.indexOf(targ.parentNode.parentNode.tagNode) !== -1) {
    	        dad = targ.parentNode.parentNode;
    	        test = 2;
    	    } else if (targ.parentNode.parentNode.parentNode.id != '' && tagx.indexOf(targ.parentNode.parentNode.parentNode.tagNode) !== -1) {
    	        dad = targ.parentNode.parentNode.parentNode;
    	        test = 3;
    	    } else if (targ.parentNode.parentNode.parentNode.parentNode.id != '') {
    	        dad = targ.parentNode.parentNode.parentNode.parentNode;
    	        test = 4;
    	    } else {
    	      	dad = targ.parentNode.parentNode;
    	        test = 5;
    	    }

  • #3
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    The id may be undefined rather than '' so it's best to test this way:

    Code:
    while (targ.parentNode && targ.parentNode.id &&
    meaning that "it has an id" other than any of undefined, '', null, void.

    Off topic, but it is preferable to declare arrays like this:

    Code:
    var tagx = ['BODY', 'P', 'LI', 'A'];
    Your current code will skip some links. Where you have LI > A followed by an UL, clicking a link in the UL will not find the first A-link (assuming this is your intent?) as it is not a parent-element.

    If you wish to search other than through the direct parent-heritage then you might consider jQuery. Using jQuery it is much easier to obtain, and navigate, siblings() and parents(), etc. It would still, however, prove a challenge to navigate reliably/consistently.

    I haven't come across tagNode(?) - nodeName.

    For your sample code your LI's need to have IDs to continue the search.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #4
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Your sample code is stopping straight-away though as it immediately finds a (parent) LI and targ is still referring to the A that I clicked.

    I'm a bit tired to correct it though at this time, soz. Try

    Code:
    while ((targ = targ.parentNode) && /* etc. */ ) 
        /* empty statement */ ;
    Last edited by AndrewGSW; 11-15-2012 at 01:18 AM.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #5
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    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 assignClickEvent(){
    		var links = document.links;
    		for(var i =0; i < links.length; i++){
    			links[i].onclick = findDivId;
    		}
    	};
    	function findDivId(e) {
    	    var targ;
    	    var dad;
    	    var idx = ['nav'];
    	    var tagx = ['BODY','P','LI','A'];
    
            e = e || window.event;
            var targ = e.target || srcElement;
            var clickedRef = targ.href;
    
    	    while((targ = targ.parentNode) && targ.id && tagx.indexOf(targ.nodeName) == -1) {
    	        //targ = targ.parentNode;
    	    }
    	    dad = targ;
    
    
    		/*
    		if (targ.parentNode.id != '') {
    	        dad = targ.parentNode;
    	    } else if (targ.parentNode.parentNode.id != '') {
    	        dad = targ.parentNode.parentNode;
    	    } else if (targ.parentNode.parentNode.parentNode.id != '') {
    	        dad = targ.parentNode.parentNode.parentNode;
    	    } else if (targ.parentNode.parentNode.parentNode.parentNode.id != '') {
    	        dad = targ.parentNode.parentNode.parentNode.parentNode;
    	    }
    	    */
    
    
     	    if (dad) {
    	    	//if(idx.indexOf(dad.id) == -1){
    				alert(dad.id + ' ' + dad.tagName + ' ' + clickedRef);
    			//}
    	    };
    	    return false;
    	};
    	window.onload = assignClickEvent;
    </script>
    </head>
    <body id="page">
    
    	<div id="main">
    	
    		<h2>Header</h2>
    		
    		<div>
    		
    		<ul id="blah2">
    			<li><a href="scot.html">Scotiabank</a> (6)</li>
    			<li><a href="mon.html">Bank of Montreal</a> (3)</li>
    			<li><a href="cibc.html">CIBC</a> (3)</li>
    			<li id="blah1"><a href="canada.html">National Bank of Canada</a> (2)</li>
    		</ul>
    	
    		</div>
    
    		<h2>Main</h2>
    
    		<ul id="nav">
    			<li><a href="scot.htm">Scotiabank</a> (6)
    				<ul id="nav-sub">
    					<li id="cib-sub"><a href="scot.html">Scotiabank</a> (6)</li>
    					<li><a href="mon.html">Bank of Montreal</a> (3)</li>
    					<li><a href="canada.html">National Bank of Canada</a> (2)</li>
    				</ul></li>
    			<li><a href="mon.html">Bank of Montreal</a> (3)</li>
    			<li><a href="cibc.html">CIBC</a> (3)</li>
    			<li><a href="canada.html">National Bank of Canada</a> (2)</li>
    		</ul>
    	
    	</div>
    	
    	
    	
    	<h2>Footer</h2>
    	
    	<ul>
    		<li><a href="scot.html">Scotiabank</a> (6)</li>
    		<li><a href="mon.html">Bank of Montreal</a> (3)</li>
    		<li><a href="cibc.html">CIBC</a> (3)</li>
    		<li><a href="canada.html">National Bank of Canada</a> (2)</li>
    	</ul>
    
    </body>
    </html>
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #6
    New Coder
    Join Date
    May 2004
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks for your feedback, Andrew.

    I am new to arrays in javascript, so thanks for the tip. I also looked at the nodeTag (not sure where it came from, but it certainly wasn't needed) so thanks for that too ... and the id check.

    I have a modified version of my original now ... still testing it though, before cleaning it up.

    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 assignClickEvent(){
    		var links = document.links;
    		for(var i =0; i < links.length; i++){
    			links[i].onclick = findDivId;
    		}
    	};
    	function findDivId(e) {
    	    var targ;
    	    var dad;
    
    	    var idx = ['nav'];
    	    var tagx = ['LI','UL','A'];
    	    if (!e){
    	        var e = window.event;
    	    }
    	    if (e.target){
    	        targ = e.target;
    	    } else if (e.srcElement) {
    	        targ = e.srcElement;
    	    }
    
    		dad = targ;
    
    
    
    		/*
    		while(dad.parentNode && dad.parentNode.id != '' && tagx.indexOf(dad.parentNode.tagName) == -1 && tagx.indexOf(dad.tagName) == -1) {
    	        dad = dad.parentNode;
    	    }
    	    */
    
    
    
    		if(targ.parentNode.tagName == 'BODY'){
    	      	dad = targ.parentNode;
    	        test = 0;
    		} else if (targ.parentNode.id && tagx.indexOf(targ.parentNode.tagName) !== -1) {
    	        dad = targ.parentNode;
    	        test = 1;
    	    } else if (targ.parentNode.parentNode.id && tagx.indexOf(targ.parentNode.parentNode.tagName) !== -1) {
    	        dad = targ.parentNode.parentNode;
    	        test = 2;
    		    if(dad.parentNode.tagName == 'LI'){
    		      	dad = targ.parentNode.parentNode.parentNode.parentNode;
    		        test = 8;
    			}
    	        if(dad.parentNode.tagName == 'LI'){
    		      	dad = targ.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode;
    		        test = 9;
    			}
    	    } else if (targ.parentNode.parentNode.parentNode.id && tagx.indexOf(targ.parentNode.parentNode.parentNode.tagName) !== -1) {
    	        dad = targ.parentNode.parentNode.parentNode;
    	        test = 3;
    	    } else if (targ.parentNode.parentNode.parentNode.parentNode.id) {
    	        dad = targ.parentNode.parentNode.parentNode.parentNode;
    	        test = 4;
    	    } else {
    	      	dad = targ.parentNode.parentNode;
    	        test = 5;
    	    }
    
    
    	    if(dad.tagName == 'LI'){
    	      	dad = targ.parentNode.parentNode.parentNode.parentNode;
    	        test = 6;
    	        if(dad.parentNode.tagName == 'LI'){
    		      	dad = targ.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode;
    		        test = 7;
    			}
    		}
    
    
    
     	    if(dad){
    	    	//if(idx.indexOf(dad.id) == -1){
    				alert('TAG = ' + dad.tagName + ' : ID = ' + dad.id + ' : HREF = ' + targ.href + ' : TEST = ' + test);
    			//}
    	    };
    
    	    return false;
    	};
    	window.onload = assignClickEvent;
    </script>
    </head>
    <body id="page">
    
    <a href="home.html">Help</a>
    
    	<div id="main">
    
    		<h2>Header</h2>
    		
    		<div>
    
    		<ul>
    			<li><a href="scot.html">Scotiabank</a> (6)</li>
    			<li><a href="mon.html">Bank of Montreal</a> (3)</li>
    			<li><a href="cibc.html">CIBC</a> (3)</li>
    			<li><a href="canada.html">National Bank of Canada</a> (2)</li>
    		</ul>
    	
    		</div>
    
    		<h2>Main</h2>
    
    		<ul id="nav">
    			<li><a href="scot.htm">Scotiabank</a> (6)
    				<ul id="nav-sub">
    					<li id="cib-sub"><a href="scot.html">Scotiabank</a> (6)
    						<ul id="nav-sub-sub">
    							<li id="cib-sub-sub"><a href="scot.html">Scotiabank</a> (6)</li>
    							<li><a href="canada.html">National Bank of Canada</a> (2)</li>
    						</ul></li></li>
    					<li><a href="mon.html">Bank of Montreal</a> (3)</li>
    					<li><a href="canada.html">National Bank of Canada</a> (2)</li>
    				</ul></li>
    			<li><a href="mon.html">Bank of Montreal</a> (3)</li>
    			<li><a href="cibc.html">CIBC</a> (3)</li>
    			<li><a href="canada.html">National Bank of Canada</a> (2)</li>
    		</ul>
    	
    	</div>
    	
    	
    	
    	<h2>Footer</h2>
    	
    	<ul>
    		<li><a href="scot.html">Scotiabank</a> (6)</li>
    		<li><a href="mon.html">Bank of Montreal</a> (3)</li>
    		<li><a href="cibc.html">CIBC</a> (3)</li>
    		<li><a href="canada.html">National Bank of Canada</a> (2)</li>
    	</ul>
    
    </body>
    </html>

  • #7
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    The code I posted in my previous post is a modified version of your original code.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #8
    New Coder
    Join Date
    May 2004
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Used a whitelist array approach in the end to get a very tight script that works under the desired framework I am using:

    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 assignClickEvent(){
    		var links = document.links;
    		for(var i =0; i < links.length; i++){
    			links[i].onclick = findDivId;
    		}
    	};
    	function findDivId(e) {
    	    var targ;
    	    var dad;
    	    var idx = ['nav','navigation','main'];
    	    var tagx = ['LI','UL','A'];
    	    if (!e){
    	        var e = window.event;
    	    }
    
    		e = e || window.event;
            var targ = e.target || srcElement;
            var clickedRef = targ.href;
    
    		while((targ = targ.parentNode) && targ.tagName != 'BODY' && idx.indexOf(targ.id) == -1);
    	    dad = targ;
    
     	    if(dad){
    			alert('TAG = ' + dad.tagName + '\nID = ' + dad.id + '\nHREF = ' + clickedRef);
    	    };
    
    	    return false;
    	};
    	window.onload = assignClickEvent;
    </script>
    </head>
    <body id="page">
    
    <a href="home.html">Help</a>
    
    	<div id="main">
    
    		<h2>Header</h2>
    
    		<div>
    
    		<ul>
    			<li><a href="scot.html">Scotiabank</a> (6)</li>
    			<li><a href="mon.html">Bank of Montreal</a> (3)</li>
    			<li><a href="cibc.html">CIBC</a> (3)</li>
    			<li><a href="canada.html">National Bank of Canada</a> (2)</li>
    		</ul>
    	
    		</div>
    
    		<h2>Main</h2>
    
    		<ul id="nav">
    			<li><a href="scot.htm">Scotiabank</a> (6)
    				<ul id="nav-sub">
    					<li id="cib-sub"><a href="scot.html">Scotiabank</a> (6)
    						<ul id="nav-sub-sub">
    							<li id="cib-sub-sub"><a href="scot.html">Scotiabank</a> (6)</li>
    							<li><a href="canada.html">National Bank of Canada</a> (2)</li>
    						</ul></li></li>
    					<li><a href="mon.html">Bank of Montreal</a> (3)</li>
    					<li><a href="canada.html">National Bank of Canada</a> (2)</li>
    				</ul></li>
    			<li><a href="mon.html">Bank of Montreal</a> (3)</li>
    			<li><a href="cibc.html">CIBC</a> (3)</li>
    			<li><a href="canada.html">National Bank of Canada</a> (2)</li>
    		</ul>
    	
    	</div>
    
    	
    	
    	<h2>Footer</h2>
    	
    	<ul>
    		<li><a href="scot.html">Scotiabank</a> (6)</li>
    		<li><a href="mon.html">Bank of Montreal</a> (3)</li>
    		<li><a href="cibc.html">CIBC</a> (3)</li>
    		<li><a href="canada.html">National Bank of Canada</a> (2)</li>
    	</ul>
    
    </body>
    </html>
    Thanks again, Andrew.

    I tried to submit the thank you button, but I don't have privileges, so "Thanks you".
    Last edited by Ulysses69; 11-16-2012 at 01:25 PM.


  •  

    Posting Permissions

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