在嵌套的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