在嵌套的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> 
     <ul> 
      <li><a href="#" class="disallowed">Link</a></li> 
      <li><a href="#" class="disallowed">Link</a></li> 
     </ul> 
    </li> 
</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'); 
}); 

• 这款采用live()赶上点击，假设一个链接更改为class="allowed"后后，单击应执行相同的操作

• 它看起来对下一个链接整个页面。如果您只想检查特定容器内部，请将其用作父级以查找链接，例如。 var links= $('#myul a');，以提高效率，并防止其影响其他页面链接

Answer 2

你可以做类似

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

这将使所有的一个标签UL在旁边被点击的链接有一个类allowed。

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