jquery-动态面包屑

我正在尝试使用以下方法为我的站点创建面包屑系统：

<div class="breadcrumb">
    <div class="item"><a href="#home">Home / </a></div>
</div>

<div class="items">
   <ul>
     <li><a href="#test1">Test 1</a></li>
     <li><a href="#test1">Test 2</a>
        <ul>
            <li><a href="">Level 1</a></li>
            <li><a href="">Level 2</a></li>
        </ul>
     </li>
     <li><a href="#test1">Test 3</a></li>
  </ul>
</div>

我想做的是，当用户点击

test1

时，面包屑是

Home/test1

，如果他们点击

test2

，然后点击

level1

，面包屑将变成

Home/test1/level2

我一直在寻找jQuery来实现这一点，但并不100%确定如何最好地实现它

任何想法都将不胜感激

谢谢你举个例子

$（'.items a'）。在（'click'，function（）上{
变量$this=$（this），
$bc=$（''）；
$this.parents（'li'）。每个（函数（n，li）{
var$a=$（li）.children（'a'）.clone（）；
$bc.prepend（'/'，$a）；
});
$（'.breadcrumb'）.html（$bc.prepend（''））；
返回false；
}) 

这可能已经在这里得到了回答：如果他们点击测试2，然后点击级别1，面包屑将变为主页/测试1/级别2，不是应该是主页/测试2/级别1吗？@Ejay抱歉，这是一个输入错误。您可能是对的。请注意，只有在单击链接不会实际将您发送到其他页面的情况下，才有必要使用javascript/jquery处理此问题。但是，我如何实际替换HTML？在

$（'.breadcrumb a'）.HTML（bc.reverse（）.join（'/'））中添加了该位每个面包屑都有一个链接是什么？i、 等等？太棒了这正是我要找的！
$('.items a').on('click', function() {
  var $this = $(this),
      $bc = $('<div class="item"></div>');

  $this.parents('li').each(function(n, li) {
      var $a = $(li).children('a').clone();
      $bc.prepend(' / ', $a);
  });
    $('.breadcrumb').html( $bc.prepend('<a href="#home">Home</a>') );
    return false;
})