• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 795
  • Last Modified:

referencing elements without ID's

If I have HTML like this

<ul>
        <li><a href="javascript://" title="Toggle" onclick="menu_toggle();">1</a>
            <ul id="one">
                  <li>1a</li>
                  <li>1b</li>
                  <li>1c</li>
                  <li>1d</li>
            </ul>
      </li>
      <li><a href="javascript://" title="Toggle" onclick="menu_toggle();">2</a>
            <ul id="two">
                  <li>2a</li>
                  <li>2b</li>
                  <li>2c</li>
            </ul>
      </li>
</ul>

What is the best way to do the following:
1) Pass a refrence to the menu_toggle function for the <a> element being clicked.
2) Select the parent element (the <li> that the link is nested in)
3) select the <ul> within that <li>

The addition of id's and such is not allowed!! Thanks!!
0
D4Ly
Asked:
D4Ly
2 Solutions
 
sam85281Commented:
Not really clear on all your questions/what you're asking for but best way to pass reference to the function is:

<a href="javascript:void(0);" title="Toggle" onclick="menu_toggle(1);">1</a>

Would help to see your toggle_menu() function but rebuild it something like:

function menu_toggle (linkID) {
if (linkID == 1) {
// do this
} else if (linkID == 2) {
//do this
}
}

If I'm missing your point altogether...please provide more details of whay you're trying to accomplish.

-Sam
0
 
Pravin AsarPrincipal Systems EngineerCommented:
This one nagivates through DOM, without reference to ids

<html>
<head>
<title>GetChildByTagName Document</title>
</head>

<body>
<script language="javascript">
function getChildByTagName (obj, tagName) {
     if (!obj) { return null; }
     for (var ix=0; ix < obj.childNodes.length; ix++) {
          var cObj = obj.childNodes[ix];
          if (!cObj || !cObj.tagName) { continue; }
          if (cObj.tagName.match(tagName)) {
                  return cObj;
          }
          if (cObj.childNodes.length) {
                    cObj = getChildByTagName(cObj, tagName);
                  if (cObj && cObj.tagName.match(getChildByTagName)) { return cObj; }
          }
           
     }
}
function getParent (src, tagName) {
     while (src.parentNode != null) {
          if (src.parentNode.tagName  == tagName) {
               return src.parentNode;
          }
          src = src.parentNode;
     }
     return src;
}
function menu_toggle(aObj) {
      var pObj= getParent(aObj, 'LI');
         if (pObj) {
      var uObj =getChildByTagName (pObj, 'UL');
               if (uObj) { alert (uObj.innerHTML); }
         }
      retun (false);
}
</script>
<ul>
      <li><a href="#" title="Toggle" onclick="return menu_toggle(this);">1</a>
            <ul id="one">
                  <li>1a</li>
                  <li>1b</li>
                  <li>1c</li>
                  <li>1d</li>
            </ul>
      </li>
      <li><a href="#" title="Toggle" onclick="return menu_toggle(this);">2</a>
            <ul id="two">
                  <li>2a</li>
                  <li>2b</li>
                  <li>2c</li>
            </ul>
      </li>
</ul>

</body>
</html>
0
 
smaccariCommented:
Nearly same answer as pravinasar, simpler maybe, but taking into account that the LI is always the parent of your A node.
The reference of A node is passed through this in the function call, the LI node is reached through this.parentNode, and then a function will find the first UL child of this LI element (will return false if no childNode with this tagName).

In this example, i added the fact to show/mask the UL element on link click.

<script>
function menu_toggle(obj){
 var liNode = obj.parentNode;
 var ulNode = getFirstChildNodeByTagName(liNode,"UL");
 if (ulNode) ulNode.style.display = ((ulNode.style.display=="none") ? "" : "none");
}
function getFirstChildNodeByTagName(parent,tagName)
{
  for (var i=0;i<parent.childNodes.length;i++) {
      if (parent.childNodes[i].tagName == tagName) return parent.childNodes[i];
  }  
  return false;
}
</script>
<ul>
        <li><a href="javascript://" title="Toggle" onclick="menu_toggle(this);">1</a><ul id="one">
               <li>1a</li>
               <li>1b</li>
               <li>1c</li>
               <li>1d</li>
          </ul>
     </li>
     <li><a href="javascript://" title="Toggle" onclick="menu_toggle(this);">2</a>
          <ul id="two">
               <li>2a</li>
               <li>2b</li>
               <li>2c</li>
          </ul>
     </li>
</ul>
0
 
D4LyAuthor Commented:
Smaccari-
Perfect! And the next step for me was in fact to add the display :) Thanks much, have a great day. I will give some credit to pravinasar, weighted to you for the simpler solution. Thanks!!!

- D4
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now