Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

jquery

parent

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.

like image 333
Elias Garcia Avatar asked Jul 30 '16 12:07

Elias Garcia


People also ask

How to find parent element in jQuery?

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.

How to parents in jQuery?

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

What is the difference between parent () and parents () methods in jQuery?

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.

Which jQuery method returns the direct parent element of the selected element?

jQuery parent() Method The parent() method returns the direct parent element of the selected element.


2 Answers

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>
like image 151
Zakaria Acharki Avatar answered Sep 28 '22 09:09

Zakaria Acharki


use $(this) instead of $(e.delegateTarget)

$(".sidebar-menu").on("click", "li:not(.treeview)", function(e){
    $(this).parents("li").first();
}
like image 38
Ashkan Mobayen Khiabani Avatar answered Sep 28 '22 09:09

Ashkan Mobayen Khiabani