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 9 of 9
  1. #1
    Senior Coder
    Join Date
    Feb 2004
    Location
    Edinburgh
    Posts
    1,352
    Thanks
    0
    Thanked 0 Times in 0 Posts

    parentNode iteration

    is there a way to simplify this statement:

    Code:
    alert(oLnk.parentNode.parentNode.parentNode.parentNode.id) ;
    ... where oLnk is a link object.

    or to get a given number of parentNodes means writing out that number long hand.

    i'd quite like to avoid recursion or nested loops if possible.

  • #2
    Senior Coder
    Join Date
    Feb 2004
    Posts
    1,206
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You can do it with a single loop:
    Code:
    function getNthAncestor(node, n) {
     var parent = node;
     for(var i = 0; i < n; i++) {
      parent = parent.parentNode;
     }
    
     return parent;
    }
    So then your call would be like:
    Code:
    alert(getNthAncestor(oLnk, 4).id) ;
    I think that should do it. Let me know how that works out for you.

    Sadiq.

  • #3
    New Coder
    Join Date
    Sep 2005
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I came across this post while googling the same kind of question. However, is there a way to make it grab every parent node up to an amount that is generated dynamically?

    So instead of simply alerting me the id of the 4th parentNode up, alert me the id of every parentNode up to one master node, which can be determined by a unique ID, className, etc.

  • #4
    Senior Coder
    Join Date
    Feb 2004
    Posts
    1,206
    Thanks
    0
    Thanked 0 Times in 0 Posts
    So instead of simply alerting me the id of the 4th parentNode up, alert me the id of every parentNode up to one master node, which can be determined by a unique ID, className, etc.
    So I'm reading this as: given a node and an ID, alert each ancestor of the given node until you reach the ID and then stop.

    Code:
    function alertAncestorsUntilID(node, id) {
     var parent = node;
     while(parent.id != id) {
      parent = parent.parentNode;
      alert(parent.id);
     }
    }
    Keep in mind this code doesn't do any error checking, so if you give a non-acenstral ID, you'll either get a Javascript null pointer error or you'll be alerted forever and you'll have to kill your browser... for this reason, I haven't even bothered to test this code

    Hope that helps,
    Sadiq.

  • #5
    New Coder
    Join Date
    Sep 2005
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It sounded like the explination you gave of what I wanted was correct, however the code keeps returning nodes all the way to the top of the document, until there are no more nodes instead of stopping at the node with the ID.

    Here's a better description of what I need. I have a node tree like this:

    Code:
    <div id="dropMenu">
    	<p><a href="#">Master item</a></p>
    		<div>
    			<p><a href="#">Child item 1</a></p>
    				<div>
    					<p><a href="#">Child item 1.1</a></p>
    				</div>
    			<p><a href="#">Child item 2</a></p>
    				<div>
    					<p><a href="#">Child item 2.1</a></p>
    				</div>
    		</div>
    </div>
    So, using some other script I find the node which contains Child item 1.1 (this would be the <P> tag before it). I then need to climb the tree backwards all the way to the node with the id of "dropMenu", finding all of the parentNodes along the way. This would be all of the <div> tags.

    Once I have those parentNodes I will take action on them, more specifically, change the style. The original node could be nested down to an unspecified amount (Child item 2.3.1.6.8).

  • #6
    Senior Coder
    Join Date
    Feb 2004
    Posts
    1,206
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'm not sure how you're using the function, but the following is my test and this works for me in both IE and Firefox:

    Code:
    <script>
     function alertAncestorsUntilID(node, id) {
      var parent = node;
      while(parent.id != id) {
       parent = parent.parentNode;
       alert(parent.id);
      }
     }
    </script>
    
    <div id="dropMenu">
     <p><a href="#">Master item</a></p>
     <div>
      <p><a href="#">Child item 1</a></p>
      <div>
       <p><a href="#" id="child11">Child item 1.1</a></p>
      </div>
      <p><a href="#">Child item 2</a></p>
      <div>
       <p><a href="#">Child item 2.1</a></p>
      </div>
     </div>
    </div>
    
    <script>
     alertAncestorsUntilID(document.getElementById("child11"), "dropMenu");
    </script>
    It could be the arguments that you're passing into the function...

    Anyway, hope this helps.
    Sadiq.
    Last edited by sad69; 10-03-2006 at 08:36 PM. Reason: editing code formatting/indenting...

  • #7
    New Coder
    Join Date
    Sep 2005
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You're right. I f'ed it up the first time. I got it working how I wanted using your code. Thank you much.

  • #8
    New Coder
    Join Date
    Sep 2005
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts
    OK, another question

    Once i've gone though and gotten all of the elements as needed, how would I go about then reversing the order that they are given to me. So that if I did an alert, it would give me the same id's only in the order which they are actually coded (top down) as opposed to the order in which they were gathered (bottom up).

    Thoughts?

  • #9
    Senior Coder
    Join Date
    Feb 2004
    Posts
    1,206
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You'd want to use a stack...

    The original function didn't include the node's id, so this function doesn't either:
    Code:
    function alertDescendentsFromID(node, id) {
     var stack = new Array();
     var parent = node;
     while(parent.id != id) {
      parent = parent.parentNode;
      stack.push(parent.id);
     }
    
     while(stack.length != 0) {
      alert(stack.pop());
     }
    }
    This function will include the node's id, in case that's what you wanted:
    Code:
    function alertDescendentsFromID(node, id) {
     var stack = new Array();
     var parent = node;
     while(parent.id != id) {
      stack.push(parent.id);
      parent = parent.parentNode;
     }
    
     while(stack.length != 0) {
      alert(stack.pop());
     }
    }
    It's worthwhile to read up on data structures and algorithms with respect to stacks, queues, and trees as developing with DOM becomes much easier with that knowledge.

    Hope this helps,
    Sadiq.


  •  

    Posting Permissions

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