Co jest nie tak z moim kodem jQuery znajdującym pierwszego rodzica?

Question

Zajmuję się małą aplikację, która bogatymi menu widoku drzewa, więc jest to 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> 

próbuję podkreślić kliknięciu elementu li dodając klasę .active do niego. Ale gdy klikniesz na podelement, chcę zaznaczyć także rodzica. Na przykład, jeśli klikniesz na ELEMENT 2.1, chcę również zaznaczyć ELEMENT 2.

To jest mój kod jQuery dostać, najpierw element kliknięty, a następnie jest to li rodzic (nie mogę zrobić IR bez selektora :not z innych powodów:

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

if działa zgodnie z oczekiwaniami , ale druga linia zawsze dają mi błąd undefined w konsoli.

Answer 1

Working Fiddle.

można użyć obiektu jQuery $(this) które odnoszą się do bieżącego elementu klikniętego następnie addClss() dodać klasę aktywną klasę:

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

UWAGA: trzeba użyć $('li').removeClass('active'); usunąć aktywną klasę od wszystkich innych li's`.

Mam nadzieję, że to pomoże.

$(".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

użycie $(this) zamiast $(e.delegateTarget)

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

Answer 3

Moja propozycja jest oparta na toggleclass i stopPropagation zdarzenia:

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