...

View Full Version : Getting the parent id of a clicked linked?



Glass Casket
12-14-2006, 04:22 AM
So I have the following HTML:


<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!

Kor
12-14-2006, 07:20 AM
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:


<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>

eric6930
12-14-2006, 03:10 PM
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;

david_kw
12-14-2006, 06:15 PM
I figured you might want the closest ancestor with an id.

So here's my attempt too. :)



<!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

Glass Casket
12-17-2006, 05:31 PM
Very nice, everyones input was very useful.

Thanks!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum