I am stuck with breadcrumbs jQuery -

i create breadcrumbs in jquery in website. stuck.

here coding below:

<ul id="bc" class="bc">      <li><a href="www.test.com/index.php">home</a></li>      <li><a href="www.test.com/about.php">about us</a>          <ul>             <li><a href="www.test.com/1.php">1</a></li>             <li><a href="www.test.com/2.php">2</a></li>         </ul>     </li> 

$(document).ready(function(){     var str=location.href.tolowercase();     $(".bc li a").each(function() {       if (str.indexof($(this).attr("href").tolowercase()) > -1) {            $("li.highlight").removeclass("highlight");            $(this).parent().addclass("highlight");            var outernav = $(this).parent().parent().parent();            var outernav2 = $(this).parent().parent().parent().parent().parent();             if(outernav.is("li")) {               outernav.addclass("highlight");            }            if(outernav2.is("li")) {               outernav2.addclass("highlight");            }            document.title=$(this).text();       }     });  }) 

i need this:

when click us:

home-->about us

when click 1:

home-->about us-->1

try

$(function() {      var str = location.href.tolowercase();      var el = $('.bc li a[href="' + str + '"]').parent();     if (el.length) {         var els = [];         {             el.addclass('highlight');             els.push(el);             el = el.parent().closest('li');         } while (el.length && !el.parent().is('.bc'));         el.addclass('highlight');          while (el.length) {             els.push(el);             el = el.prev();         }          var arr = $.map(els, function(v, i) {                     return $('a', v).text();                 }).reverse();         document.title = arr.join('-->');     }  }); 

demo: fiddle