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
    }
  })
});