基于 JavaScript 的面包屑导航

Question

我有 HTML 代码：

<ul class="breadcrumb">
    <li><a href="#">Home</a> <span class="divider">/</span></li>
    <li><a href="#">Library</a> <span class="divider">/</span></li>
    <li class="active"><a href="#">Data</a></li>
</ul>

我想通过 JavaScript 基于 javascript $currentPath 变量来更改它，该变量存储如下字符串：“/var/www/stackoverflow” 因此，在上面的示例中，我的面包屑应该如下所示：

<ul class="breadcrumb">
    <li><a href="#">var</a> <span class="divider">/</span></li>
    <li><a href="#">www</a> <span class="divider">/</span></li>
    <li class="active"><a href="#">stackoverflow</a></li>
</ul>

有人可以帮助我吗？

Answer 1

你可以像这样分割变量。

var url = $currentPath.split('/'); //now url = ["", "var", "www", "stackoverflow"]
var breadcrumb = '';
//Use a for loop
for(var i=0;i<url.lenght;i++){
  if(url[i]!=''){
    breadcrumb = '<li><a href="#">'+url[i]+'</a> <span class="divider">/</span></li>'
  }
} 

Answer 2

为您概述该过程：

1. 在 '/' 上拆分 $currentPath 字符串。这会给你一个（面包屑）数组。
2. 对于数组中的每个元素：
   1. 根据您的喜好创建（或克隆）
   2. 元素，并根据需要设置其内容。
   3. 附加您的新
   4. 列表。

如果您需要详细信息，请随时询问，否则请尽情解决;)

Google：

• mdn split
• jquery clone
• jquery text
• jquery append