Jquery tree traversal not working

Question

through tree traversing i am trying to capture the immediate submenu for the item clicked. I have used .parent().siblings() to get the element. But somehow it is not working. Please help me to resolve the issue. Here is the html mark-up.

<ul class="menu">
<li class="1"><a href="#" class="menu-item">Link1</a></li>
<ul class="subMenu">
<li>Sublink11</li>
<li>Sublink12</li>
<li>Sublink13</li>
</ul>
<li class="2"><a href="#" class="menu-item">Link2</a></li>
<ul class="subMenu">
<li>Sublink21</li>
<li>Sublink22</li>
<li>Sublink23</li>
</ul>
<li class="3"><a href="#" class="menu-item">Link3</a></li>
<ul class="subMenu">
<li>Sublink31</li>
<li>Sublink32</li>
<li>Sublink33</li>
</ul>                    
</ul>

Here is the javascript code i have used to capture the list.

var menuItems = $('.menu-item');
    var icon = "<i class='icon icon-collapse'></i>";
    var innerMenu;
    $.each(menuItems, function(){
        $(this).append(icon);
        $(this).on('click', function(){
            console.log($(this).parent().closest('ul.subMenu'));
            //$(this).closest('ul.subMenu').show();
        });

    })

Can you setup a jsfiddle and/or describe what you would like to happen more thoroughly? — Jay Blanchard, Feb 14 '13 at 16:59

score 2 · Answer 1 · answered Feb 14 '13 at 17:05

Your HTML is invalid. Valid HTML would be:

<ul class="menu">
   <li class="1">
      <a href="#" class="menu-item">Link1</a>
      <ul class="subMenu">
         <li>Sublink11</li>
         <li>Sublink12</li>
         <li>Sublink13</li>
      </ul>
   </li>
   <li class="2">
      <a href="#" class="menu-item">Link2</a>
      <ul class="subMenu">
         <li>Sublink21</li>
         <li>Sublink22</li>
         <li>Sublink23</li>
      </ul>
   </li>
   <li class="3">
      <a href="#" class="menu-item">Link3</a>
      <ul class="subMenu">
         <li>Sublink31</li>
         <li>Sublink32</li>
         <li>Sublink33</li>
      </ul>
   </li>
</ul>

jQuery:

$(".menu-item").click(function(){
   var closestMenu = $(this).next();
   console.log(closestMenu);
   return false;
});

Jquery tree traversal not working

1 Answers1