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;
})

修改

正如op提到的结构，UL不在LI内，所以这里是更新的小提琴 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; })

Answer 2

如有疑问，请使用console.log，按F12查看输出，然后转到控制台选项卡（我在Chrome中）。

在此处添加console.log后：

$bc = $('<div class="item"></div>');
console.log($this.parents('li'));

我可以看到$ this.parents（'li'）没有任何父母。基本上，此代码尝试执行的操作是获取每个父级li，并为每个父级添加面包屑。

尝试将其视为路径（例如，1级锚标记）：

Level 1 > Parent is Li > Parent is Ul > Parent is Ul -> Parent is Div[class="items"]

您的代码找不到任何li父级，因此无法确定创建的级别。你将不得不遵循他们的html模式才能使其正常工作。

Answer 3

要保存您的html语法，请使用以下代码：

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

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

如果你在相应的“li”

之后保持每个“ul”，它应该始终有效

http://jsfiddle.net/3ncwtan7/

Answer 4

如果您希望保留html语法，可以使用以下代码：

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

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

可以找到一个示例here。

新的面包屑

4 个答案: