jquery - 面包屑上的新内容

Question

基本上，这看起来很简单，我按照这个question and the solution .

当我从数据库检索某些内容并在 UL LI 元素上使用我自己的标准时，我遇到了一些问题。

我的代码:

<ol class="breadcrumb">
    <liclass="item"><a href="#home">Home / </a></li>
</ol>

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

$('.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;
}) 

我真的不擅长这个。如果有人提供帮助，请表示感谢。

Answer 1

http://jsfiddle.net/mPsez/335/

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

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

$('.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;
}) 

Edit:

正如op提到的结构，UL并不位于LI内，所以这里是更新的 fiddle http://jsfiddle.net/mPsez/338/

$('.items a').on('click', function() {
  var $this = $(this),
      $bc = $('<div class="item"></div>');

  $this.closest('li').each(function(n, li) {
      var $a = $(li).children('a').clone();
      $bc.prepend(' / ', $a);
  });
   $this.parents('ul').each(function(i,ul){

       var $li= $(ul).prev('li');

        var $a= $li.children('a').clone();

       if($a.text().length>0){
           $bc.prepend(' / ', $a);
       }
    });



    $('.breadcrumb').html( $bc.prepend('<a href="#home">Home</a>') );
    return false;
})