View Full Version : parentOf ?

01-29-2006, 10:46 AM

I need to change the class attribute of a parent object.

For example, I have a <ul>, and I need to change it's class based on a child. Is there some way to reference it, such as parentof.class or something?

Also, it gets more tricky. I may need to to the same thing for grandparents, great grandparents, etc. If there's a way to reference them all up the line, perhaps until some condition is true, (ie when it reaches an element with a certain id or something). If anyone knows how this works please let me know. I know it's backwards from how we normally do things.

Thanks a lot. Sorry if the message doesn't make much sense, it's almost 5 AM.

Hoping for help - I'll check back soon.


01-29-2006, 12:23 PM
element.parentNode will return the parent node of an element.

while(element.id!='something') {


would loop 'upwards' until an ID is reached.

01-30-2006, 12:40 AM
That looks perfect. One question: How would I 'seed' it? ie, tell the loop which element to start from. I have an id set, I just need to put it into the loop.

01-30-2006, 03:55 AM

Here's the script I came up with:

<script type="text/javascript">
d = document.getElementById("baby");
while(d.id !="MenuTree") {
if (d.tagName == "ul") {
d.setAttribute("class", "open");

I'm getting an error, I believe on the line with the while loop "d has no properties" what have I done wrong?

Sorry, I don't usually do too much with DOM Scripting - thanks in advance for the help.


01-30-2006, 04:04 AM
var element = document.getElementById('whatever');
while (element && element.id!='something') {
Sorry it's a late post.

Check if d is not null like I did above in element. You may arrive at the last node that doesn't have a parent tag. And use d.className to set the class for cross-browser compatibility. Some browsers don't support setAttribute for setting CSS class.

01-30-2006, 05:49 AM
Excellent, thanks.

Here's what I have:

<script type="text/javascript">
var count = 0;
var element = document.getElementById('baby');
while(element.id!='menuTree') {
if (element.tagName=='LI' & count > 0) {

Sorry, I posted this before I read your last edit. Using element.className solved the problem.

It works awesome and looks great in Firefox and Opera. Any clue what the problem is in IE? it appears to do nothing. However, I'm also not getting any errors from IE so I'm not sure what's happening.


02-01-2006, 04:14 PM
This may get some thoughts started. But a bit more dynamic, so you can send alternate "search" functions to the ancestors walker function.


function getParentOrSelf(element, fn) {
return !element ? null : fn(element) ? element :
getParentOrSelf(element.parentNode, fn);

function handler(e) {
var p = getParentOrSelf(e.srcElement||e.target, function(node) {
return node.id == "menu";
if (p) p.className = "open";

if (document.addEventListener)
document.addEventListener("click", handler, false);
else if (document.attachEvent)
document.attachEvent("onclick", handler);

.open {color:green;}
<ul id="menu">