jQueryを使用してネストされた順序付けられていないリストをブレッドクラムに変換する

Question

ajaxによってネストされた順序付けられていないリストが作成されており、ブレッドクラム形式のナビゲーションを作成したいと考えています。最終結果は、リスト内の任意のノードをクリックして、親リスト項目がブレッドクラムナビゲーションに表示されるはずです。

<div id="list"> 
    <ul> 
     <li class="expanded"> 
      <a href="#" id="1122">Root Group</a> 
     </li> 
     <ul> 
      <li class="expanded"> 
       <a href="#" id="1126">Northeast US</a> 
      </li> 
      <ul> 
       <li class="collapsed"> 
        <a href="#" id="1127">Massachusetts</a> 
       </li> 
       <ul style="display: none; "> 
        <li class="expanded node"> 
         <a href="#" id="1128">Mansfield-Foxboro</a> 
        </li> 
        <li class="expanded node"> 
         <a href="#" id="1129">North Attleboro</a> 
        </li> 
       </ul> 
       <li class="expanded"> 
        <a href="#" id="1144">New Hampshire</a> 
       </li> 
       <ul> 
        <li class="expanded node"> 
         <a href="#" id="1145">Manchester</a> 
        </li> 
       </ul> 
      </ul> 
      <li class="expanded"> 
       <a href="#" id="1181">Mid-Atlantic US</a> 
      </li> 
      <ul> 
       <li class="expanded"> 
        <a href="#" id="1182">New York City</a> 
       </li> 
       <ul> 
        <li class="expanded node"> 
         <a href="#" id="1183">Time Square</a> 
        </li> 
       </ul> 
      </ul> 
     </ul> 
    </ul> 
</div> 

だから私はニューヨークをクリックすると、私が手： ルートグループ>中部大西洋米国>ニューヨーク

私はノースアットルボロをクリックして、私が手： ルートグループ>米国北東部>マサチューセッツ州> North Attleboro

jQueryトラバーサルを使用してこのパスを構築する方法はありますか？

Answer 1

あなたがにprev()を適用し、その後、その先祖チェーンの<ul>要素を一致させるためにparents()を使用して、クリックした<a>要素から開始することができます直前の<li>要素を得る。

そこからfind()を使用して、リストアイテム内の<a>要素と一致させることができます。 add()結果セットに対するハイパーリンク自体をクリックすると、パス内のすべてのハイパーリンクを適切な順序で含むjQueryオブジェクトが作成されます。

と一緒に、要素の内部テキスト値の配列を構築するには、map()を使用するだけでパス文字列を連結できます。あなたはthis fiddleでそれをテストすることができ

$("a").click(function() { 
    var path = $(this).parents("ul").prev("li").find("a").add(this) 
     .map(function() { 
      return $(this).text(); 
     }).get().join(" > "); 

    // Do something with 'path'... 
}); 

：最終的な結果は次のようなものです。

Answer 2

次のコードでクリックした <li>のすべて <li>先祖を取得することができます

：

$('li').bind('click', function() { 
    var $ascendants = $(this).parents('ul'), 
     output  = []; 
    $.each($ascendants, function (index, value) { 
     output.push($(value).children('li').not('.node').children('a:first').text()); 
    }); 
    //output is not an array of all the text within parent li tags of the clicked li tag 
    console.log(output); 
}); 

これはからのテキストを選択し、すべての優勢<ul>クリックされた<li>のタグ、それらを反復処理し、見つけました非.node<li>のです。ここで

はあなたのbreadcrumsに使用できる配列を出力jsfiddleです：http://jsfiddle.net/rE9x8/1/

Answer 3

私はちょうど粗構造をナビゲート：

$('a').click(function(e){ 
    e.preventDefault(); 
    for (var current = $(this),string = [];current.parent().parent().parent().attr('id') != 'list';current = current.parent().parent().prev().children('a')) 
     string.push(current.text()); 
    string.push(current.text()); 
    alert(string.reverse().join('>')); 
});