title: Dynamic breadcrumb based on current page & list using Javascript/jQuery ()
body: <p>found these two approaches to realize breadcrumbs:</p>
  
  <ul>
  <li><a href="https://stackoverflow.com/questions/16416842/jquery-dynamic-breadcrumb">jquery - dynamic breadcrumb</a></li>
  <li><a href="https://stackoverflow.com/questions/25844332/dynamic-breadcrumb-based-on-current-page-using-javascript-jquery?rq=1">Dynamic breadcrumb based on current page using Javascript/jQuery</a></li>
  </ul>
  
  <p>The later one is almost the thing I'm looking for but has three issues:</p>
  
  <ol>
  <li>it fails if there a serveral pages with the same name</li>
  <li>the current page has a link</li>
  <li>I would like to remove the first i.e. Home-link</li>
  </ol>
  
  <p>Could you please help me to improve that, I'm a total noob... ?</p>
  
  <p>Thats the code which I took from the other post: </p>
  
  <pre><code>var url = "level3.html";
  //location.pathname.substring(location.pathname.lastIndexOf("/") + 1);
  var currentItem = $(".items").find("[href$='" + url + "']");
  $(".bredcrumb").html($("&lt;a href='/'&gt;Home&lt;/a&gt;"));
  $(currentItem.parents("li").get().reverse()).each(function () {
      $(".bredcrumb").append("/").append( $(this).children("a"));
  });
  </code></pre>
  
  <p>The list:</p>
  
  <pre><code>&lt;nav class="items"&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="test.html"&gt;Test 1&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="test2.html"&gt;Test 2&lt;/a&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="level1.html"&gt;Level 1&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href="test/level2.html"&gt;Level 2&lt;/a&gt;
                      &lt;ul&gt;
                          &lt;li&gt;&lt;a href="test/level2/level3.html"&gt;Level 3&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;&lt;a href="test/level2/level32.html"&gt;Also at level 3&lt;/a&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="test3.html"&gt;Test 3&lt;/a&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;
  &lt;div class="bredcrumb"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>I changed <em>location.pathname.substring(location.pathname.lastIndexOf("/") + 1);</em> into <em>location.pathname.substring(location.pathname.lastIndexOf("/") - 3);</em> which seems to help for the first issue. But I'm not sure whether that is a good solution.</p>
  
  <p>Thank you very much,
  Tobias</p>