How to match URL with href in jQuery?

Question

Using a list for navigation, I am looking for a clean way to apply the \'selected\' class to a list item if the page URL (minus anything after the path) matches the href of the

Answer 1

I guess if you keep your html like

<li><a href="/p/clothing/dresses/N-10635?ab=leftNav:dresses">dresses</a></li>

but change the comparisson to:

$('.leftNav li a').each(function(){
    if (this.href.indexOf(location.pathname) > -1) {
        $(this).parents('li').addClass('selected');
    }
});

you'll get what you need!

The "if" above will check if the given path is contained in item's href property.

So, if your URL is "http://www.yourhost.com/p/clothing/dresses/N-10635?param=value", it's path (/p/clothing/dresses/N-10635) should be found, and the output for the given example would be:

<li class="selected"><a href="/p/clothing/dresses/N-10635?ab=leftNav:dresses">dresses</a></li>

I hope this helped! =)

Answer 2

Assuming there isn't any '?' character in the actual path you could use something like this for both the location and the href:

function getBaseURL(url) {
    return url.split('?')[0];
}

Answer 3

you can use indexOf()

$(document).ready(function () {
    $('.leftNav li a').each(function(){
        var ThisHref = ($(this).attr('href').split('?'))[0];
        if(window.location.href.indexOf(ThisHref) > -1) {
            $(this).closest('li').addClass('selected');
        }
   });
});

Example

var url = "http://www.website.com/index/p/clothing/bottoms/capris/N-10764?ab=leftNav:capris";

$(document).ready(function () {
    $('.leftNav li a').each(function(){
        var ThisHref = ($(this).attr('href').split('?'))[0];
        //alert(ThisHref);
        if(url.indexOf(ThisHref) > -1) {
            $(this).closest('li').addClass('selected');
        }
   });
});

.selected{
  background : red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="leftNav">
<li><a href="/p/clothing/dresses/N-10635?ab=leftNav:dresses">dresses</a></li>
<li><a href="/p/clothing/bottoms/capris/N-10764?ab=leftNav:capris">capris</a></li>
</ul>

Explanation:

$(document).ready(function () {  // run the code after document is ready
    $('.leftNav li a').each(function(){ // loop through <a> on <li>
       // $(this).attr('href') will return href as string .. in your case will return something like '/p/clothing/dresses/N-10635?ab=leftNav:dresses'
       // using .split('?') to separating this href string by '?'
       // [0] get the first string after split (in this case it will be '/p/clothing/dresses/N-10635')
       // combine all of those steps on just one line
       var ThisHref = ($(this).attr('href').split('?'))[0];
       // get the 'window.location.href' which is return your url ..something like 'http://www.website.com/index/p/clothing/bottoms/capris/N-10764?ab=leftNav:capris'
       // try to find (first string after split) into (url/window.location.href)
       if(window.location.href.indexOf(ThisHref) > -1) { // if the url contains the first string after split addClass
          $(this).closest('li').addClass('selected'); 
       }
    });
}); 

you can read about .split() here

Note: in Vinas answer he use this.href which will return href as string .. in your case will return something like '/p/clothing/dresses/N-10635?ab=leftNav:dresses' and he use location.pathname and the code of indexOf() he try to find the location.pathname into the href

Additional: in your case both my answer and Vinas answer will work . that's not depending on code its depending on your case and what you're trying to do .. something like .hide(0) , .slideUp(0) , fadeOut(0) all of those hide the element with same effect .. So the code always determine by the case you working with .. May be my code or even Vinas's code won't work on another case