중첩 된 ul 트리에서 다음 태그 가져 오기

Question

트리 순서를 나타내는 중첩되지 않은 목록이 있습니다. 정렬되지 않은 목록에는 많은 중첩 된 ul 태그가있을 수 있습니다. 아주 간단한 예 :

자세히 알 수 있듯이 일부 링크는 "허용됨"클래스를 가질 수 있습니다. 그런 링크가 클릭되면 트리에서 다음 태그를 얻고 싶습니다. 클래스에 "허용되지 않음"이 있으면 "허용"으로 변경하십시오.

트리에서 다음 태그를 어떻게 가져올 수 있습니까?

업데이트 :

무슨 뜻인가? 전 : 이것에

<ul> 
    <li><a href="#" class="allowed">Link</a> 
     <ul> 
      <li><a href="#" class="allowed">Link</a></li> 
      <li><a href="#" class="allowed">Link</a></li> 
     </ul> 
    </li> 
    <li><a href="#" class="allowed">Link</a><!-- this gets clicked on --> 
     <ul> 
      <li><a href="#" class="disallowed">Link</a></li> 
      <li><a href="#" class="disallowed">Link</a></li> 
     </ul> 
    </li> 
</ul> 

HTML 변경 :

<ul> 
    <li><a href="#" class="allowed">Link</a> 
     <ul> 
      <li><a href="#" class="allowed">Link</a></li> 
      <li><a href="#" class="allowed">Link</a></li> 
     </ul> 
    </li> 
    <li><a href="#" class="allowed">Link</a> 
     <ul> 
      <li><a href="#" class="allowed">Link</a></li> 
      <li><a href="#" class="disallowed">Link</a></li> 
     </ul> 
    </li> 
</ul> 

등등.

Answer 1

$('.allowed').live(function() { 
    var links= $('a'); 
    var ix= links.index(this); 
    if (ix!==-1 && ix<links.length-1) 
     links.eq(ix+1).removeClass('disallowed').addClass('allowed'); 
}); 

• , 클릭 전체 페이지. 특정 컨테이너 내부 만 확인하려면 해당 컨테이너를 부모 컨테이너로 사용하십시오 (예 : var links= $('#myul a');, 그것은 다른 페이지에 영향을 미치는 효율성을 방지하는 것은

Answer 2

이 클래스 allowed이 다음 클릭 된 링크에 대한 UL 아래의 모든는 A 태그를 만들 것입니다

$('a.allowed').click(function(){ 
    $(this).next().find('a:first').attr('class', 'allowed'); 
}); 

뭔가를 할 수 있습니다. 동일한 작업이의 다음 링크를 찾습니다

을 수행해야이 링크가 class="allowed"로 변경 후 후 가정, 클릭을 잡으려고 live()를 사용

Answer 3

$(document).ready(function() { 
     var el = null; 
     $('ul li a.allowed').click(function(){ 
     el = $(this); 
     while($(el).closest('.ul')){ 
      el = $(el).closest('.ul'); 
      var a = $(el).find('li a.disallowed:first'); 
      if(a){ 
      $(a).removeclass('disallowed').addClass('allowed'); 
      return true; 
      } 
     } 
    }); 
}); 

Answer 4

$(function(){ 
    $('ul li a').click(function(){ 
     if ($(this).is('.allowed')) { 
      var nextElem = $(this).next('ul').length?$(this).next('ul'):$(this).closest('li').next('li'); 
      nextElem.find('a:first'). 
       filter(function(){ 
        return $(this).is('.disallowed'); 
       }). 
       removeClass('disallowed'). 
       addClass('allowed'); 
     } 
     return false; 
    }); 
}); 

휴 링크! demo