사용 JQuery와 빵 부스러기

Question

에 중첩 된 순서없는 목록을 변환하는 나는 아약스에 의해 채워 중첩 된 순서없는 목록을 가지고 있고 그것을 밖으로 이동 경로 스타일의 탐색을 만들 찾고 있어요. 최종 결과는 목록의 노드를 클릭해야하며 상위 목록 항목이 탐색 경로 탐색에 표시됩니다.

<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

당신은 클릭 한 <a> 요소에서 시작에 prev()을 적용 후, 조상 체인의 <ul> 요소에 맞게 parents()을 사용할 수 있습니다 결과는 직전의 <li> 엘리먼트를 얻는다.

여기에서 find()을 사용하여 목록 항목 내의 <a> 요소와 일치시킬 수 있습니다. 결과 집합에 대한 클릭 된 하이퍼 링크 자체 add()을 사용하면 경로의 모든 하이퍼 링크를 적절한 순서로 포함하는 jQuery 객체를 갖게됩니다.

이제 과 함께 <a> 요소의 내부 텍스트 값 배열을 작성하기 만하면 map()을 사용해야 만 경로 문자열을 연결할 수 있습니다. 최종 결과는 다음과 같습니다.

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

this fiddle에서 테스트 할 수 있습니다.

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