基于当前页面和列表的动态面包屑使用 Javascript/jQuery ()答案

【问题标题】：Dynamic breadcrumb based on current page & list using Javascript/jQuery ()基于当前页面和列表的动态面包屑使用 Javascript/jQuery ()
【发布时间】：2016-08-01 12:32:25
【问题描述】：

找到了这两种实现面包屑的方法：

后一个几乎是我正在寻找的东西，但有三个问题：

如果有多个同名页面会失败
当前页面有链接
我想删除第一个，即主页链接

你能帮我改进一下吗，我是个菜鸟……？

这是我从其他帖子中获取的代码：

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"));
});

名单：

<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>

我把 location.pathname.substring(location.pathname.lastIndexOf("/") + 1); 改成了 location.pathname.substring(location.pathname.lastIndexOf("/ ") - 3); 这似乎对第一个问题有所帮助。但我不确定这是否是一个好的解决方案。

非常感谢，托比亚斯

【问题讨论】：

@user3064227 帮助我解决了问题。 3 但我仍然无法解决其他问题。有人可以帮我吗？
我解决了问题 nr。 2 在 css 和 nth-last-child 选择器的帮助下。

标签： javascript jquery breadcrumbs

【解决方案1】：

你要找的代码是

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"));
});

这会删除当前页面链接。如果我们稍微了解一下代码 url 正在捕获此代码从中提取最后一部分的页面的 url，该部分假定为 html 页面名称（例如：home.html）。然后 currentItem 找到具有之前找到的 html 页面名称的 html 元素。最后一行做了两件事 1. 获取锚标记的父元素，您可以在其中获取 html 页面名称，然后将父元素的子名称附加到面包屑。之所以如此，是因为菜单中的页面名称和外观并不总是相同的示例，您将页面命名为 myhmpg.html，但在菜单中您可能已将其显示为主页。希望这个解释有所帮助。如果您发现您的问题没有得到正确回答，请回复评论

【讨论】：

非常感谢，解决了 3. 的问题。我现在正在尝试使用 if/else 参数解决当前页面问题。第一个问题比较复杂，有人有想法吗？

【解决方案2】：

完整的 Javascript 函数来显示来自页面 url 的面包屑

  function getBreadcrumbs() {
    const here = location.href.split('/').slice(3);
    // console.log(here)
    const parts = [{"text": 'Home', "link": '/'}];
    // console.log(parts)

    for (let i = 0; i < here.length; i++) {
        const part = here[i];
        // console.log(part)
        const text = decodeURIComponent(part).toUpperCase().split('.')[0];
        // console.log(text)
        const link = '/' + here.slice(0, i + 1).join('/');
        console.log(link)
        parts.push({"text": text, "link": link});
        // console.log(parts)
    }
    return parts.map((part) => {
        return "<a href=\"" + part.link + "\">" + part.text + "</a>"
    }).join('<span style="padding: 5px">/</span>')
}

document.getElementById("demo").innerHTML = getBreadcrumbs();

【讨论】：

【解决方案3】：

我终于找到了问题的（脏？）答案：

    $(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\"));
        });
    });

然后我用css隐藏了last-child，并取了一个css边框来划分面包屑。

【讨论】：