I'm developing a small app which haves a tree view menu, so this is the 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>
I'm trying to highlight the clicked li element adding the .active
class to it. But, when you click on a subelement, I want to highlight also the parent. For example, if you click the ELEMENT 2.1
I want to highlight also the ELEMENT 2
.
This is my jQuery code to get, first the clicked element, and then it's li parent (I can't do ir without the :not
selector for other reasons:
$(".sidebar-menu").on("click", "li:not(.treeview)", function(e){
$(e.delegateTarget).parents("li").first();
}
The if statement works as expected, but the second line always give me a undefined
error in the console.
The parent() method returns the direct parent element of the selected element. The DOM tree: This method only traverse a single level up the DOM tree. To traverse all the way up to the document's root element (to return grandparents or other ancestors), use the parents() or the parentsUntil() method.
The parents() method returns all ancestor elements of the selected element. An ancestor is a parent, grandparent, great-grandparent, and so on. The DOM tree: This method traverse upwards from the parent element along ancestors of DOM elements, all the way up to the document's root element (<html>).
parent() method returns the direct parent element of the selected one. This method only traverse a single level up the DOM tree. parents() method allows us to search through the ancestors of these elements in the DOM tree.
jQuery parent() Method The parent() method returns the direct parent element of the selected element.
Working Fiddle.
You could use the jQuery object $(this)
that refer to the current clicked element then addClss()
to add class active class :
$(this).parents('li').addClass('active');
NOTE : you have to use $('li').removeClass('active');
to remove active class from all the other li's`.
Hope this helps.
$(".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>
use $(this)
instead of $(e.delegateTarget)
$(".sidebar-menu").on("click", "li:not(.treeview)", function(e){
$(this).parents("li").first();
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With