Dynamic breadcrumb based on current page & list using Javascript/jQuery () -


found these 2 approaches realize breadcrumbs:

the later 1 thing i'm looking has 3 issues:

  1. it fails if there serveral pages same name
  2. the current page has link
  3. i remove first i.e. home-link

could please me improve that, i'm total noob... ?

thats code took other post:

var url = "level3.html"; //location.pathname.substring(location.pathname.lastindexof("/") + 1); var currentitem = $(".items").find("[href$='" + url + "']"); $(".bredcrumb").html($("<a href='/'>home</a>")); $(currentitem.parents("li").get().reverse()).each(function () {     $(".bredcrumb").append("/").append( $(this).children("a")); }); 

the list:

<nav class="items">     <ul>         <li><a href="test.html">test 1</a>         </li>         <li><a href="test2.html">test 2</a>             <ul>                 <li><a href="level1.html">level 1</a>                 </li>                 <li><a href="test/level2.html">level 2</a>                     <ul>                         <li><a href="test/level2/level3.html">level 3</a>                         </li>                         <li><a href="test/level2/level32.html">also @ level 3</a>                         </li>                     </ul>                 </li>             </ul>         </li>         <li><a href="test3.html">test 3</a>         </li>     </ul> </nav> <div class="bredcrumb"></div> 

i changed location.pathname.substring(location.pathname.lastindexof("/") + 1); location.pathname.substring(location.pathname.lastindexof("/") - 3); seems first issue. i'm not sure whether solution.

thank much, tobias

the code looking is

var url = "level3.html"; //location.pathname.substring(location.pathname.lastindexof("/") + 1); var currentitem = $(".items").find("[href$='" + url + "']"); $(".bredcrumb").html($("home")); $(currentitem.parents("li").get().reverse()).each(function () { $(".bredcrumb").append("/").append( $(this).children("a")); 

});

this removes current page link. if understand code bit url capturing url of page code extracting last part assumed html page name (ex: home.html). currentitem finding html element has html page name found earlier.the last line 2 things 1. parent element of anchor tag html page name , append child name of parent element in breadcrumb. because page name , appearance int menu not same example name page myhmpg.html in menu u might have shown home. hope explanation helps.please comment see question not answered properly


Comments