Question

有没有办法让jQuery在网页上生成面包屑？

因此，如果网站网址是： mysite.com/sec1/sec2/page

面包屑会是这样的：主页＆gt; Sec1＆gt; Sec2＆gt;页

谢谢

Answer 1

var url = 'mysite.com/sec1/sec2/page'; // = location.href
var parts = url.split('/');
parts[0] = 'Home';
var breadcrumb = parts.join(' &gt; ');
$('#breadcrumb').html(breadcrumb);

Answer 2

这将创建一个可用于生成面包屑的数组。

var here = location.href.split('/').slice(3);

var parts = [{ "text": 'Home', "link": '/' }];

for( var i = 0; i < here.length; i++ ) {
    var part = here[i];
    var text = part.toUpperCase();
    var link = '/' + here.slice( 0, i + 1 ).join('/');
    parts.push({ "text": text, "link": link });
}

虽然，我真的认为你应该在服务器端处理这个问题！

Answer 3

splitted_url = document.url.split('/');

将为您提供包含每个目录的数组，然后您可以像splitted_url[0]

那样访问它们

Answer 4

除了JavaScript本身提供的功能之外，jQuery没有任何唯一的URL解析功能。您可以使用以下命令获取URL路径：

var path = location.pathname;

然后，您可以通过以下方式获取路径的各个部分：

var parts = path.split('/');

然后，只需遍历各个部分，然后根据需要生成面包屑HTML。

Answer 5

自从我刚实现此功能并想了解其他解决方案以来，我便深感同情。

const titleizeWord = (str) => `${str[0].toUpperCase()}${str.slice(1)}`;
const kebabToTitle = (str) => str.split("-").map(titleizeWord).join(" ");
const toBreadcrumbs = (link, { rootName = "Home", nameTransform = s=> s} = {}) =>
    link
        .split("/")
        .filter(Boolean)
        .reduce(
            (acc, curr, idx, arr) => {
                acc.path += `/${curr}`;
                acc.crumbs.push({
                    path: acc.path,
                    name: nameTransform(curr),
                });

                if (idx === arr.length - 1) return acc.crumbs;
                else return acc;
            },
            { path: "", crumbs: [{ path: "/", name: rootName }] },
        );

toBreadcrumbs("/team-members/joe-schmoe", { nameTransform: kebabToTitle });
/*
[
  { path: "/", name: "Home" },
  { path: "/team-members", name: "Team Members },
  { path: "/team-members/joe-schmoe", name: "Joe Schmoe" },
]
*/

Answer 6

完整的 Javascript 功能，可根据 Bill Criswell 的回答显示来自页面 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();

jQuery从url生成面包屑？

6 个答案: