Jump to content

UL within UL and selecting top level LI's


astralaaron

Recommended Posts

I have some lists set up like the following:

<ul id="menu">     <li><a href="#">link a</a>             <ul>                   <li>...</li>                   <li>...</li>              </ul>     </li>       <li><a href="#">link b</a>             <ul>                   <li>...</li>                   <li>...</li>              </ul>     </li>     <li><a href="#">link c</a>             <ul>                   <li>...</li>                   <li>...</li>              </ul>   </li></ul>

I'm trying to pull the text from each of the first anchors (link a, link b, link c)...but having some problems.

 

 

 

Most recently i've tried..:

            var X = document.getElementById("menu");            var Y = X.getElementsByTagName("li");              for (var i=0; i < Y.length; i++) {                  var Z = Y[i].getElementsByTagName('A');                    console.log( Z[0].innerHTML);                 }

but this jumps into the ul's within the li's. Thanks for any help, it's sort of urgent..

 

 

EDIT:

 

What I need really is to be able to get the a reference to the top level LI's and also be able to grab the text within the <a> of those LI's...

Edited by astralaaron
Link to comment
Share on other sites

The top level li require you find siblings not children, try this

<!DOCTYPE html><html>    <head>        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">        <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0,user-scalable=no" />        <title>Document Title</title>        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>        <script  type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>        <script type="text/javascript">            window.onload = function()            {                findTopLi();            };            function findTopLi()            {                parentElement = document.getElementById("menu");                listItems = parentElement.getElementsByTagName("LI");                i = 0;                valid = true;                while (valid !== false) {                    if (i === 0)                    {                        siblinglist = listItems[i]; //find first li sibling                        i++;                    }                    else                    {                        siblinglist = getSibling(siblinglist); // find other siblings                    }                    //siblinglist.style.backgroundColor = "red";                    alert(siblinglist.childNodes[0].innerHTML);                    valid = getSibling(siblinglist);                }            }            function getSibling(elem)            {                y = elem.nextSibling;                while (y.nodeType !== 1)                {                    y = y.nextSibling;                    if (y === null)                    {                        return false;                    }                }                return y;            }        </script>        <style type="text/css">        </style>    </head>    <body>        <div>            <ul id="menu">                <li><a href="#">list 1</a></li>                <li><a href="#">list 2</a>                    <ul>                        <li><a href="#">list 2 -1</a></li>                        <li><a href="#">list 2 -2</a></li>                        <li><a href="#">list 2 -3</a></li>                        <li><a href="#">list 2 -4</a></li>                    </ul>                </li>                <li><a href="#">list 3</a></li>                <li><a href="#">list 4</a></li>                <li><a href="#">list 5</a>                    <ul>                        <li><a href="#">list 5 -1</a></li>                        <li><a href="#">list 5 -2</a></li>                        <li><a href="#">list 5 -3</a></li>                        <li><a href="#">list 5 -4</a></li>                    </ul>                </li>                <li><a href="#">list 6</a></li>            </ul>        </div>    </body></html>
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...