How to add class in jQuery to a given element?

See below an example working for the snippets url of this site ( link )

$(document).ready(function() {
    
    var pathname = location.pathname.replace('#', ''); 

    
    $('.nav a').each(function(){
      if($(this).attr('href') == pathname){
        $(this).addClass('active');
        return false;
      }
    });
    
});

.active{
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class='nav navbar-nav navbar-right menuHover'>
    <li>
        <a href='/'>
            <span>
                Página Inicial
            </span>
        </a>
    </li>
    <li class='dropdown'>
        <a href='/cursos'>
            <span>
                Cursos
            </span>
        </a>
    </li>
    <li>
        <a href='contact3.html'>
            <span>
                Contato
            </span>
        </a>
    </li>
  <li>
        <a href='/js'>
            <span>
                Javascript
            </span>
        </a>
    </li>
</ul>

You just have to go through each li (Oops! a) until you find one that contains a href equal to location.pathname . So there is a better way to do this if you re-interpret the href of each li, turning it into a new instance of Location .

And why add a '/' at the beginning of each directory? Because comparing each directory against the location.href directory could fail if I did not add, for example, if that directory were equal to location.href , its comparison would still fail if I did not have a '/' at start, as well as location.href could have.

  

(location.href.pathname="/ dir";

     

(this.pathname="dir")

(location.href.pathname = "/dir") === (this.pathname = "dir")
// false

To find out if the directory does not contain a '/' at the beginning, just a condition like this: pathname.charAt(0) !== '/' , since the directory is String ...;]

$(document).ready(function() {
    var pathname = location.pathname.charAt(0) !== '/' ? 
                        location.pathname = '/' + location.pathname :
                        location.pathname

    $('.navbar-nav a').each(function() {
        var link = document.createElement('a')
        link.href = this.href
        if ((link.pathname.charAt(0) !== '/' ?
                        href = '/' + href :
                        href) === pathname) {
            $(this).addClass('active')
            return false
        }
    });
});