HTML：

  <div class="wayfinder"></div>
    <ul>
        <li><span class="name">Start state</span>

            <ul class="show">
                <li><span class="name">Superstate 1</span>

                    <ul class="show">
                        <li><span class="name">Start Cycle</span>

                            <ul class="show">
                                <li><span class="name">task 1 </span>

                                </li>
                                <li><span class="name">task 2 </span>

                                </li>
                                <li><span class="name">task 3 </span>

                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><span class="name">X-fer to dal</span>
        </li>
        <li><span class="name">end cycle</span>
        </li>
    </ul>

的jQuery

$(".name").click(function () {
    var bread = $(this).parents()
        .map(function () {
        return this.text();
    }).get().join("> ");
    $('.wayfinder').text(bread);
});

例如，如果我点击“任务2”，结果将是：开始状态＆gt;超级1＆gt;开始周期＆gt;任务2

Answer 1

您的javascript出现错误，您需要在this.text上显示“this”的引号

我修改过它：

$(".name").click(function() {

   var bread = $(this).parents().map(function () {
   return $(this).text();
}).get().join("> ");

$('.wayfinder').text(bread);
});

在你的JSFiddle中，看起来这就是你想要的东西，而JSFiddle在那里放了一些你可能在实际网站上看不到的额外东西。

Answer 2

我认为这就是你要找的东西：

$(".name").click(function () {
    var bread = $(this).add($(this).parents('ul').not($(this).closest('ul')).find('.name:first')).map(function () {
      return $(this).text();
  }).get().join(" > ");
  $('.wayfinder').text(bread);
});

<强> Demo fiddle

<强>更新

如果你想限制面包屑的数量，那么简单的方法就是将父母选择器限制为只有.parents('ul:lt(3)')的前2个父母，这样你就可以获得最多3个标签，但是如果你想要的话像My furthest parent > ... > My parent > Me这样更加花哨的你可以使用这样的东西：

$(".name").click(function () {
  var bread = $(this).add($(this).parents('ul').not($(this).closest('ul')).find('.name:first')).map(function(){return $(this).text();}).get();
  if(bread.length > 3){
      bread.splice(1,bread.length-3, '...');
  }
  bread = bread.join(' > ');
  $('.wayfinder').text(bread);
});

<强> Updated fiddle

如何单击列表项并显示其父项？

HTML：

的jQuery

2 个答案: