0

示例：http: //jsfiddle.net/UCgFa/11/

我正在尝试选择一个列表项并显示它，它是层次结构中的父项。

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”，结果将是：开始状态 > 超级状态 1 > 开始周期 > 任务 2

4

2 回答 2

2

您的 javascript 出现错误，您需要在 this.text 上的“this”周围加上引号

我已经像这样修改它：

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

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

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

在您的 JSFiddle 中，看起来这就是您想要的，并且 JSFiddle 将一些额外的东西放在那里，您可能在您的实际站点中看不到。

于 2013-07-30T22:38:57.963 回答
1

我想这就是你要找的：

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

演示小提琴

更新

如果你想限制面包屑的数量，简单的方法是将父母选择器限制为只有前 2 个父母，.parents('ul:lt(3)')这样你就可以得到最多 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);
});

更新的小提琴

于 2013-07-30T23:32:21.323 回答