astralaaron Posted April 5, 2015 Share Posted April 5, 2015 (edited) 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 April 5, 2015 by astralaaron Link to comment Share on other sites More sharing options...
dsonesuk Posted April 5, 2015 Share Posted April 5, 2015 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 More sharing options...
astralaaron Posted April 5, 2015 Author Share Posted April 5, 2015 thank you for this option Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now