In attempting to modify a script of a menu, that I wanted to add the ability to have sub menus, I first wanted to find out if an ordered list element, contained a secondary unordered list and what their names are so I could out put the items to the console.

Here is the test list:

1. <div class="nav-wrap">
2. <ul class="group" id="example-one">
3. <li class="current_page_item"><a href="#">Home</a></li>
4. <li><a href="#">Buy Tickets</a></li>
5. <li><a href="#">Group Sales</a></li>
6. <li>
7. <a href="#">Reviews</a>
8. <ul>
9. <li>
10. <a href="#">One</a>
11. <a href="#">Two</a>
12. <a href="#">Three</a>
13. </li>
14. </ul>
15. </li>
16. </ul>
17. </div>

And here is the jQuery that I tried in several variations to ouput to the console. I am not figuring out how to point correctly to the children elements and how to print to the console. Hope someone can help. Thanks!

1. $("#example-one li a").hover(function() {
2. $el = $(this);
3. leftPos = $el.position().left;
4. newWidth = $el.parent().width();
5. if($el.length > 0 ){
6. console.log($el.length);
7. var myContent = $el.children('li');
8. console.log(myContent);
9. }
10. $($el + '>').each(function(idx, element){
11. console.log(
12. 'Element ' + idx +
13. 'has the following html: ' +
14. $(element).html()
15. );
16. });