使用Javascript / jQuery基于当前页面和列表的动态面包屑（）

Question

found these two approaches to realize breadcrumbs:

• jquery - dynamic breadcrumb
• Dynamic breadcrumb based on current page using Javascript/jQuery

The later one is almost the thing I'm looking for but has three issues:

1. it fails if there a serveral pages with the same name
2. the current page has a link
3. I would like to remove the first ie Home-link

Could you please help me to improve that, I'm a total noob... ?

Thats the code which I took from the 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 at 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); into location.pathname.substring(location.pathname.lastIndexOf("/") - 3); which seems to help for the first issue. But I'm not sure whether that is a good solution.

Thank you very much, Tobias

Answer 1

The code you are looking for 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 the current page link. if we understand the code a bit url is capturing the url of the page from which this code is extracting the last part which is assumed to be the html page name (ex: home.html). then the currentItem finding the html element that has the html page name found earlier.the last line does two things 1. get the parent element of the anchor tag where you get the html page name and then append the child name of the parent element in the breadcrumb. this is so because the page name and the appearance int he menu is not always same example you name the page as myhmpg.html but in the menu u might have shown it as Home. Hope this explanation helps. Please comment back you see your question is not answered properly

Answer 2

I finally found the (dirty?) answer to the problem:

    $(document).ready(function() {  
        var url = location.href; //absolute path instead of file name
        var currentItem = $(\".items\").find(\"[href$='\" + url +  \"']\");
        $(\".bredcrumb\").html($(\"Home\"));        
        $(currentItem.parents(\"li\").get().reverse()).each(function () {
          $(\".bredcrumb\").append( $(this).children(\"a\"));
        });
    });

Then I hided the last-child with css and took a css border to divide the breadcrumbs.