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

Thread: parentOf ?

  1. #1
    Regular Coder
    Join Date
    Apr 2003
    Location
    Montreal, QC
    Posts
    340
    Thanks
    3
    Thanked 2 Times in 2 Posts

    parentOf ?

    hello,

    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.

    John
    Search for Laughter or Just Search?
    GiggleSearch.org
    Blog: www.johnbeales.com
    All About Ballet: www.the-ballet.com

  • #2
    Senior Coder
    Join Date
    Sep 2005
    Posts
    1,791
    Thanks
    5
    Thanked 36 Times in 35 Posts
    element.parentNode will return the parent node of an element.

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

    }

    would loop 'upwards' until an ID is reached.

  • #3
    Regular Coder
    Join Date
    Apr 2003
    Location
    Montreal, QC
    Posts
    340
    Thanks
    3
    Thanked 2 Times in 2 Posts
    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.
    Search for Laughter or Just Search?
    GiggleSearch.org
    Blog: www.johnbeales.com
    All About Ballet: www.the-ballet.com

  • #4
    Regular Coder
    Join Date
    Apr 2003
    Location
    Montreal, QC
    Posts
    340
    Thanks
    3
    Thanked 2 Times in 2 Posts
    So,

    Here's the script I came up with:

    Code:
    <script type="text/javascript">
    d = document.getElementById("baby");
    while(d.id !="MenuTree") {
    if (d.tagName == "ul") {
    d.setAttribute("class", "open");
    }
    d=d.parentNode;
    }
    </script>
    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.

    John
    Search for Laughter or Just Search?
    GiggleSearch.org
    Blog: www.johnbeales.com
    All About Ballet: www.the-ballet.com

  • #5
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,037
    Thanks
    0
    Thanked 250 Times in 246 Posts
    Code:
    var element = document.getElementById('whatever');
    while (element && element.id!='something') {
       element=element.parentNode;
    }
    Edit: 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.

  • #6
    Regular Coder
    Join Date
    Apr 2003
    Location
    Montreal, QC
    Posts
    340
    Thanks
    3
    Thanked 2 Times in 2 Posts
    Excellent, thanks.

    Here's what I have:
    Code:
    <script type="text/javascript">
    var count = 0;
    var element = document.getElementById('baby');
    while(element.id!='menuTree') {
    	if (element.tagName=='LI' & count > 0) {
    	element.setAttribute('class','open');
    	}
    element=element.parentNode;
    count++;
    }
    </script>
    Edit:
    Sorry, I posted this before I read your last edit. Using element.className solved the problem.
    JB


    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.

    John
    Last edited by johnnyb; 01-30-2006 at 04:57 AM.
    Search for Laughter or Just Search?
    GiggleSearch.org
    Blog: www.johnbeales.com
    All About Ballet: www.the-ballet.com

  • #7
    Regular Coder
    Join Date
    Aug 2005
    Posts
    282
    Thanks
    0
    Thanked 0 Times in 0 Posts
    This may get some thoughts started. But a bit more dynamic, so you can send alternate "search" functions to the ancestors walker function.

    Code:
    <html>
    <head>
      <script>
        
        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);
        
      </script>
      <style>
        .open {color:green;}
      </style>
    </head>
    <body>
      <ul id="menu">
        <li>
          folder
          <ul>
            <li>File</li>
            <li>file</li>
          </ul>
        </li>
      </ul>
    </body>
    </html>
    Last edited by KC-Luck; 02-01-2006 at 04:53 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
    •