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

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 つの親のみに制限することです。これにより、最大 3 つのラベルを取得できますが、使用できる.parents('ul:lt(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 に答える