我的 jQuery 代码查找第一个父项有什么问题？

Question

我正在开发一个带有树视图菜单的小应用程序，所以这是 html:

<ul class="sidebar-menu">
    <li class="active"><a href="javascript:;"> ELEMENT 1 </a></li>
    <li class="treeview">
        <a href="javascript:;"> ELEMENT 2 <span class="pull-right-container"><i class="fa fa-angle-left pull-right"></i></span></a>
        <ul class="treeview-menu">
            <li><a href="javascript:;"> ELEMENT 2.1 </a></li>
            <li><a href="javascript:;"> ELEMENT 2.2 </a></li>
        </ul>
    </li>
    <li><a href="javascript:;"> ELEMENT 3 </a></li>
</ul>

我试图突出显示单击的 li 元素，并向其添加 .active class。但是，当您单击子元素时，我还想突出显示父元素。例如，如果您单击 ELEMENT 2.1 我还想突出显示 ELEMENT 2。

这是我要获取的 jQuery 代码，首先是单击的元素，然后是 li 父元素（由于其他原因，如果没有 :not 选择器，我无法做到：

$(".sidebar-menu").on("click", "li:not(.treeview)", function(e){
    $(e.delegateTarget).parents("li").first();
}

if 语句按预期工作，但第二行总是在控制台中给我一个 undefined 错误。

Answer 1

Working Fiddle.

您可以使用引用当前单击元素的 jQuery 对象 $(this) 然后 addClss() 添加 class 活动 class :

$(this).parents('li').addClass('active');

注意： 您必须使用 $('li').removeClass('active'); 从所有其他 li 中删除活动的 class。

希望对您有所帮助。

$(".sidebar-menu").on("click", "li:not(.treeview)", function(e){
  //remove active class from all the other li's
  $('li').removeClass('active');
 
  $(this).addClass('active'); //add active class to the clicked li

  //Add active class to the parent if exist
  if( $(this).parents('li').length > 0)
      $(this).parents('li').addClass('active');
})

.active{
  background-color: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="sidebar-menu">
  <li class="active"><a href="javascript:;"> ELEMENT 1 </a></li>
  <li class="treeview">
    <a href="javascript:;"> ELEMENT 2 <span class="pull-right-container"><i class="fa fa-angle-left pull-right"></i></span></a>
    <ul class="treeview-menu">
      <li><a href="javascript:;"> ELEMENT 2.1 </a></li>
      <li><a href="javascript:;"> ELEMENT 2.2 </a></li>
    </ul>
  </li>
  <li><a href="javascript:;"> ELEMENT 3 </a></li>
</ul>

Answer 2

使用$(this)代替$(e.delegateTarget)

$(".sidebar-menu").on("click", "li:not(.treeview)", function(e){
    $(this).parents("li").first();
}

Answer 3

我的提案基于 toggleclass 和事件 stopPropagation:

$(function () {
  $(".sidebar-menu").on("click", "li", function(e){
    $(".sidebar-menu").find('.active').toggleClass('active');
    if ($(this).is('li.treeview')) {
      $(e.target).toggleClass('active');
    } else {
      $(e.target).closest("li").toggleClass('active');
      if ($(e.target).closest('.treeview').length == 1) {
        $(e.target).closest('.treeview-menu').prev().toggleClass('active');
        e.stopPropagation();
      }
    }
  });
});

.active {
  background-color: red;
}

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<ul class="sidebar-menu">
    <li class="active"><a href="javascript:;"> ELEMENT 1 </a></li>
    <li class="treeview">
        <a href="javascript:;"> ELEMENT 2 <span class="pull-right-container"><i class="fa fa-angle-left pull-right"></i></span></a>
        <ul class="treeview-menu">
            <li><a href="javascript:;"> ELEMENT 2.1 </a></li>
            <li><a href="javascript:;"> ELEMENT 2.2 </a></li>
        </ul>
    </li>
    <li><a href="javascript:;"> ELEMENT 3 </a></li>
</ul>

我的 jQuery 代码查找第一个父项有什么问题？

What's wrong with my jQuery code finding the first parent?

jquery

parent