[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Navigating the DOM in a definition list

Posted on 2006-05-01
5
Medium Priority
?
502 Views
Last Modified: 2013-11-19
Hi folks,

I'm hoping someone can help me with this.  I know the basics of navigating through the DOM using parents, childs, siblings etc, but I'm having a bit of a brain fart with the current problem I'm facing.  

I have a definition list like this:


      <div id="my-project-programs-container" class="scrollBox-content-container">
            <dl>
                  <dt><strong>Project Name:</strong> Star</dt>
                        <dd><a href="">Latest Status Report</a></dd>
                        <dd><a href="">Technical Overview</a></dd>
                        <dd class="last"><a href="">Team QA Report</a></dd>
                  <dt><strong>Project Name:</strong> Star</dt>
                        <dd><a href="">Latest Status Report</a></dd>
                        <dd><a href="">Technical Overview</a></dd>
                        <dd class="last"><a href="">Team QA Report</a></dd>
                  <dt><strong>Project Name:</strong> Star</dt>
                        <dd><a href="">Latest Status Report</a></dd>
                        <dd><a href="">Technical Overview</a></dd>
                        <dd class="last"><a href="">Team QA Report</a></dd>
                  <dt><strong>Project Name:</strong> Star</dt>
                        <dd><a href="">Latest Status Report</a></dd>
                        <dd><a href="">Technical Overview</a></dd>
                        <dd class="last"><a href="">Team QA Report</a></dd>
            </dl>
      </div>


ANd I'm running a script that is dynamically inserting a link within the <dt> tags.  That link is supposed to run a function that will hide or show all the <dd> tags that belong to the specific <dt> tag.  Because the <dd> tags are not children of the <dt> tag I'm not sure how to do a loop to find the proper tags - it would need to find all the <dd> tags until the next <dt> tag or until the closing </dl> tag.

I really appreciate any guidance!


bruno
0
Comment
Question by:bruno
  • 2
4 Comments
 
LVL 3

Expert Comment

by:radevo
ID: 16578380
This should be cross-browser workable (tested in Firefox).
For IE only audience, you could work with DOM node property .nextSibling instead of looping over childNodes.



<html>
<head>
<title>Toggler</title>
<script type='text/javascript'>
      function toggle(button) {
            for (var dt = button.parentNode; dt!=null && dt.nodeName!='DT'; dt=dt.parentNode) {}

            var parent = dt.parentNode

    var dt_siblings = parent.childNodes;

    var node;
    var do_toggle = false
    var mode = '?'
    var done = false

            for (var i=0; i<dt_siblings.length && !done; i++) {
                  var node = dt_siblings[i]
                  if (node == dt)
                    do_toggle = true
                  else
                  if (node.nodeName == 'DT')
                    do_toggle = false
                    done = (mode != '?')
                  else
                  if (do_toggle && node.nodeName == 'DD') {
                        if (mode == '?') {
                              if (node.style.display == 'none')
                                mode = 'block'
                              else
                                    mode = 'none'
                        }
                        node.style.display = mode
                  }
            }
      }
</script>
</head>
<body>

<div id="my-project-programs-container" class="scrollBox-content-container">
          <dl>
               <dt><strong>Project Name:</strong> Star
                        <input type=button value="toggle" onclick="toggle(this)">
               </dt>
                    <dd><a href="">Latest Status Report</a></dd>
                    <dd><a href="">Technical Overview</a></dd>
                    <dd class="last"><a href="">Team QA Report</a></dd>
               <dt><strong>Project Name:</strong> Star
                        <input type=button value="toggle" onclick="toggle(this)">
               </dt>
                    <dd><a href="">Latest Status Report</a></dd>
                    <dd><a href="">Technical Overview</a></dd>
                    <dd class="last"><a href="">Team QA Report</a></dd>
               <dt><strong>Project Name:</strong> Star
                        <input type=button value="toggle" onclick="toggle(this)">
               </dt>
                    <dd><a href="">Latest Status Report</a></dd>
                    <dd><a href="">Technical Overview</a></dd>
                    <dd class="last"><a href="">Team QA Report</a></dd>
               <dt><strong>Project Name:</strong> Star
                        <input type=button value="toggle" onclick="toggle(this)">
               </dt>
                    <dd><a href="">Latest Status Report</a></dd>
                    <dd><a href="">Technical Overview</a></dd>
                    <dd class="last"><a href="">Team QA Report</a></dd>
          </dl>
     </div>
</body>
</html>
0
 
LVL 18

Author Comment

by:bruno
ID: 16579210
sorry i actually ended up finishing this before you posted:



findDDtags : function(obj) {
            pNode = obj.parentNode;  //the DT tag
            
            //find the existing DT tag
            for (i=0;i < pNode.parentNode.childNodes.length;i++) {
                  curTag = pNode.parentNode.childNodes[i];
                  if (curTag == pNode) {
                        var dtNum = i;
                  }
            }
            
            //find the number of the last DD child node from the existing DT tag
            for (j=dtNum;j < pNode.parentNode.childNodes.length;j++) {
                  curTag = pNode.parentNode.childNodes[j];
                  curSibling = pNode.parentNode.childNodes[j].nextSibling;
                  
                  //make sure the current tag has a sibling
                  if (curSibling != null) {
                        //make sure the sibling is an actual tag, not whitespace
                        if (curSibling.nodeType == 1) {            
                              if (curSibling.nodeName != "DD") {
                                    lastDD = j;
                                    break;
                              }
                        }
                  } else {  //there was no sibling - this is the last tag
                        lastDD = j;
                  }
            }
            
            //toggle them
            for (k=dtNum;k < lastDD;k++) {
                  curTag = pNode.parentNode.childNodes[k];
                  curSibling = pNode.parentNode.childNodes[k].nextSibling;
                  //make sure the current tag has a sibling
                  if (curSibling != null) {
                        //make sure the sibling is an actual tag, not whitespace
                        if (curSibling.nodeType == 1) {
                              if (curSibling.nodeName == "DD") {
                                    toggle(curSibling);
                              }
                        }
                  }
            }
            
      }


i don't have timeto test your solution but if someone else can confirm it looks good i can give you the points.


bruno
0
 
LVL 3

Expert Comment

by:radevo
ID: 16771711
Bruno:

Could *you* confirm my answer (posted before your self-answer) works ?

I don't have a network of EE people to call upon to verify and respond to my code postings.  I don't post code unless it works for me.
0
 

Accepted Solution

by:
GranMod earned 0 total points
ID: 16791952
PAQed with points refunded (500)

GranMod
Community Support Moderator
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Viewers will learn about basic arrays, how to declare them, and how to use them. Introduction and definition: Declare an array and cover the syntax of declaring them: Initialize every index in the created array: Example/Features of a basic arr…
The viewer will learn how to dynamically set the form action using jQuery.
Suggested Courses

873 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question