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

为您概述流程：

split $currentPath上的'/'字符串。这会给你一个阵列（碎屑）。
for each元素：
1. create（或clone）<li> - 您喜欢的元素，根据需要设置其内容。
2. append您的新<li> <ul>列表。

随时询问您是否需要详细信息，否则请尽情享受;）

谷歌：

mdn split
jquery clone
jquery text
jquery append

Answer 2

你可以像这样拆分变量。

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

基于JavaScript的面包屑

2 个答案: