Geek Answers Handbook

What happened to my jQuery code which found the first parent?

I'm developing a small application that has a tree structure of the menu, so this 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 am trying to highlight the item clicked li, adding to it a class .active . But when you click on a sub-element, I also want to highlight the parent. For example, if you press ELEMENT 2.1 , I also want to highlight the ELEMENT 2 .

This is my jQuery code to get first item with a click, and then its parent limit (I can not do without ir selector :not for other reasons:

 $(".sidebar-menu").on("click", "li:not(.treeview)", function(e){ $(e.delegateTarget).parents("li").first(); } ) on ( "click", "li: not (.treeview)"., function (e) { $(".sidebar-menu").on("click", "li:not(.treeview)", function(e){ $(e.delegateTarget).parents("li").first(); } ") first ().; $(".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 gives me an error undefined in the console.

+5
source share
3 answers

Working script .

You can use the object of the jQuery $(this) , which refers to the current element with a click, and then addClss() , to add a class to active class:

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

NOTE: You must use $('li').removeClass('active'); 'active');. to remove the active class of all 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'); }) ) on ( "click", "li: not (.treeview)"., function (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'); }) li's $(".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').; $(".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'); }) exist $(".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'); }) 'li'). length> $(".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'); }) ') addClass ( 'active').; $(".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> "> <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> <a href="javascript:;"> ELEMENT <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> -container"> <i class = "fa fa-angle-left pull-right"> </ i> </ span> </ <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> "> <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> </ li> <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> </ li> <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>
Run codeHide result
+4
source

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

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

My proposal is based on toggleclass and event 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(); } } }); }); ). on ( "click", "li", function (e) { $(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(); } } }); }); ) find ( 'active.') toggleClass ( 'active')..; $(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(); } } }); }); 'li.treeview')) { $(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(); } } }); }); '); $(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(); } } }); }); ") toggleClass ( 'active').; $(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(); } } }); }); '. treeview'). length == $(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(); } } }); }); . treeview-menu') prev () toggleClass ( 'active').; $(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> "> <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> <a href="javascript:;"> ELEMENT <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> -container"> <i class = "fa fa-angle-left pull-right"> </ i> </ span> </ <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> "> <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> </ li> <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> </ li> <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>
Run codeHide result
+1
source

More articles:


All Articles