Jquery树遍历不起作用答案

【问题标题】：Jquery tree traversal not workingJquery树遍历不起作用
【发布时间】：2013-02-15 01:05:06
【问题描述】：

通过树遍历我试图捕获单击项目的直接子菜单。我已经使用 .parent().siblings() 来获取元素。但不知何故，它不起作用。请帮我解决问题。这是html标记。

<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>

这是我用来捕获列表的 javascript 代码。

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();
        });

    })

【问题讨论】：

您能否设置一个 jsfiddle 和/或更彻底地描述您希望发生的事情？
不是有效的html，ul必须在li中

标签： jquery jquery-traversing

【解决方案1】：

您的 HTML 无效。有效的 HTML 是：

<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;
});

【讨论】：