jQuery Relative path issue

Question

I am currently am trying to get this below function working. I would like to use a relative path in order to add an active class for my different ul li a tag in my dom. The problem I am facing is that despite splitting the URL, it doesn't appear to be checking and comparing right part of the url and href. here is an of my HTML structure:

   <div class="parent-bar"> <ul> <li> 
  <a class="parent-link" href="/dummy-parent-2/">
         <div class="wrap">
             <span class="text">Parent page 2
             </span>
         </div> </a> <div id="child-menu-1" class="child-menu">
         <ul>
             <li>
                 <a href="/dummy-parent-2/dummy-child-1/" class="child-links">
                 <div class="wrap">
                     <span class="text">child page 1
                     </span>
                 </div>
                 </a>
             </li>
         </ul> </div> </li> </ul> </div>

and here is the jQuery supposed to be tracking the url:

jQuery(function($) {

  var path = window.location.href;

  path = path.split("/");
 
  $(".parent-link").each(function() {
   if (this.href === path[3]) {
    $(this).addClass('active');
   }
  });
    if($('.parent-link').hasClass('active')){
      $('.child-links').addClass('active');
    }
 });

The console is not showing any errors. I can see the active class is not added. The reason I am looking to do this is to allow the children of the parent items to be active as well. I will apply the same principle to the children to track the parent's respective URL. if that makes sense.

Any help or insight would be much appreciated.