Установить активный класс с JQuery

Question

Я пытаюсь использовать следующий JavaScript, чтобы установить активный класс

var url = window.location.pathname, 
        urlRegExp = new RegExp(url == '/' ? window.location.origin + '/?$' : url.replace(/\/$/, '')); // create regexp to match current url pathname and remove trailing slash if present as it could collide with the link in navigation in case trailing slash wasn't present there 
       // now grab every link from the navigation 
       $('.page-sidebar a').each(function() { 
        // and test its normalized href against the url pathname regexp 
        if (urlRegExp.test(this.href.replace(/\/$/, ''))) { 
         $(this).addClass('active'); 
        } 
       }); 

Проблема заключается в том, что мне нужно, чтобы установить его на родителе <li> элемента, а не <a>

Пример моих меню HTML

<div class="page-sidebar nav-collapse collapse"> 
    <ul> 
     <li> 
      <div class="sidebar-toggler hidden-phone"></div> 
     </li> 
     <li class="start"> // HERE I NEED TO ADD CLASS ACTIVE 
      <a href="/default.aspx"> 
      <i class="icon-home"></i> 
      <span class="title">Dashboard</span> 
      </a> 
     </li> 
<ul> 

Answer 1

Используйте .closest(), чтобы найти ближайший предок/родитель, соответствующий нужный селектор. Это более гибко и безопаснее, чем просто использование прямого родителя, поскольку оно продолжает работать, даже если некоторые изменения сделаны в разметке HTML (например, дополнительный уровень разметки, вставленный между целевым и родительским).

$(this).closest("li").addClass("active"); 

Answer 2

C hange $(this).addClass('active'); до $(this).parent().addClass('active');.

Answer 3

Для того, чтобы установить его на родителе:

$(this).parent().addClass('active'); 

Answer 4

Использовать ближайшую():

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