Select Closest href Match With jQuery?

Question

trying to narrow down <a> hrefs to one with jQuery filter and then add the tag active class.
I am doing this because I get redirected from sidebar submenu and want to still keep sidebar menu open.

 $(document).ready(function () { var url = window.location; $('ul.treeview-menu a').filter(function () { return url.indexOf(this.href) > -1; }).parentsUntil(".sidebar-menu >.treeview-menu").addClass('active'); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul class="sidebar-menu" data-widget="tree"> <li class="header">General</li> <li class="home"><a href="/p/index.php"><i class="fas fa-tachometer-alt"></i> <span> Dashboard</span></a></li> <li class="header">Data Managment</li> <li class="treeview"> <a href="#">p <span>Tree</span> <span class="pull-right-container"> <i class="fa fa-angle-left pull-right"></i> </span> </a> <ul class="treeview-menu"> <li><a href="/p/pages/foo.php">foo</a></li> <li><a href="/p/pages/bar.php">bar</a></li> <li><a href="/p/pages/blah.php">blah</a></li> <li><a href="/p/pages/blahh.php">blahh</a></li> </ul> </li> <li class="treeview"> <a href="#"></i> <span>Tree 2</span> <span class="pull-right-container"> <i class="fa fa-angle-left pull-right"></i> </span> </a> <ul class="treeview-menu"> <li><a href="/p/pages/aaa.php">aaa</a></li>... </ul> </li> </ul>

then if I get redirected inside foo and href be like /p/pages/foo.php/new.php I still want to foo be active.

why don't this work?

Answer 1

Other way would be using each loop and then comparing if the url == this.href if yes then add class to that li and open closest ul .

Demo Code :

 $(document).ready(function() { //just for demo... var url = 'https://stacksnippets.net/p/pages/bar.php'; $('ul.treeview-menu a').each(function() { //if full url is not same with li use indexof else if http://...also there in href of a tag use below.. if (url == this.href) { $(this).addClass('active') //add class active to `a` $(this).closest("ul").slideDown(); //slide ul tag where `li` is active } }) })

 .treeview-menu { display: none }.active { color: red; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul class="sidebar-menu" data-widget="tree"> <li class="header">General</li> <li class="home"><a href="/p/index.php"><i class="fas fa-tachometer-alt"></i> <span> Dashboard</span></a></li> <li class="header">Data Managment</li> <li class="treeview"> <a href="#">p <span>Tree</span> <span class="pull-right-container"> <i class="fa fa-angle-left pull-right"></i> </span> </a> <ul class="treeview-menu"> <li><a href="https://stacksnippets.net/p/pages/foo.php">foo</a></li> <li><a href="https://stacksnippets.net/p/pages/bar.php">bar</a></li> <li><a href="https://stacksnippets.net/p/pages/blah.php">blah</a></li> <li><a href="https://stacksnippets.net/p/pages/blahh.php">blahh</a></li> </ul> </li> <li class="treeview"> <a href="#"> <span>Tree 2</span> <span class="pull-right-container"> <i class="fa fa-angle-left pull-right"></i> </span> </a> <ul class="treeview-menu"> <li><a href="https://stacksnippets.net/p/pages/aaa.php">aaa</a></li>... </ul> </li> </ul>

Updated Code :

$(window).on('load', function() {
  var url = window.location.href;
  var new_url = url.slice(url.lastIndexOf('/') + 1);
  $('ul.treeview-menu a').each(function() {
    var res = this.href.replace(".php", "");
    var href = res + "/" + new_url;
    if (href == url) {
      $(this).parent().addClass('active') //add class active to `a
      $(this).closest("ul").slideDown(); //slide ul tag where `li` is active
    }
  })
});