add icon-class on nav based on URL

Question

I am not really a web programmer and neither a english speaker, so excuse myself if I said something illogical.

I am trying to add an icon-class on every 'li' item of the navigation based on the URL that is active, I don´t know if it is important but I am using twitter bootstrap. The HMTL:

<ul class="nav">
   <li class="active"><a href="index.html">Inici</a></li>
   <li><a href="servi.html">Serveis</a></li>
   <li><a href="acti.html">Activitats</a></li>
   <li><a href="contact.html">Contacte</a></li>
   <li id="date"><i class="icon-calendar"></i></li>
</ul>

The Javascript:

function activeLinkNav(){

  var href = location.href.toLowerCase();
  var separa = href.split('/'); // cut the string on '/'
  var lastUri = separa[separa.length-1]; // accessing last item [separa]


$('.nav li a').each(function(){
    if (href.indexOf(this.href.toLowerCase())> -1){

        switch (true){

            case lastUri == 'index.html':
                $(this).prepend('<span><i class="icon-home"></i></span>');
                break;

            case lastUri == 'servi.html':
                $(this).prepend('<span><i class="icon-user-md"></i></span>');
                break;

            case lastUri.indexOf('acti.html')!== -1:
                $(this).prepend('<span><i class="icon-group"></i></span>');
                break;

            case lastUri == 'contact.html':
                $(this).prepend('<span><i class="icon-envelope"></i></span>');
                break;
        }

    } else $(this).prepend('<i class="icon-double-angle-right"></i>');
});
}

Everything is working fine except when I am accessing to the root domain, debugging my code I see that lastUri = ""; so why if I put this:

            case lastUri == "":
                $(this).prepend('<span><i class="icon-home"></i></span>');
                break;

the code is not working?

I´ve tried a lot of things but this is all my knowledge, any idea?

The web in question:

http://residencia-geriatrica-ergos.com/

Thanks!!

Answer 1

Because if (href.indexOf(this.href.toLowerCase())> -1) will not be true. href will be equal to "http://residencia-geriatrica-ergos.com/" and this.href will be equal to "index.html", thus it will not be found in href.

My suggestion:

$(window).load(function() {
  var href = location.href.toLowerCase();
  switch(href):
     case 'http://residencia-geriatrica-ergos.com/':
       $('a[href="index.html"]').prepend('<span><i class="icon-home"></i></span>'); //append active icon
       $('li:not(.active) a').prepend('<i class="icon-double-angle-right"></i>'); //append standard icons
     break;
     case 'http://residencia-geriatrica-ergos.com/index.html':
       $('a[href="index.html"]').prepend('<span><i class="icon-home"></i></span>');
       $('li:not(.active) a').prepend('<i class="icon-double-angle-right"></i>'); //append standard icons
     break;
     case 'http://residencia-geriatrica-ergos.com/servi.html':
       $('a[href="servi.html"]').prepend('<span><i class="icon-home"></i></span>');
       $('li:not(.active) a').prepend('<i class="icon-double-angle-right"></i>'); //append standard icons
     break;
   //add other