Get next a tag in nested ul tree

Question

I have a nested unordered list representing a tree hierarchy. There can be many deeply nested ul tags in the unordered list. Very simple example:

<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>

As you can see, some links can have class "allowed". When a link like that is clicked, I would like to get a next a tag in the tree and if it has class "disallowed", change it to "allowed".

How can I get the next a tag in the tree?

UPDATE:

What I mean. Before:

<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 changes to this:

<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>

And so on.

Answer 1

you could do something like

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

this will make all the a tags under the ul next to the a link that was clicked have a class allowed.

Answer 2

$(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 3

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

• this uses live() to catch clicks, assuming that after after a link is changed to class="allowed", clicking that should perform the same action

• it looks for the next link on the whole page. If you only want to check inside a particular container, use that as the parent to find links in, eg. var links= $('#myul a');, for efficiency and to prevent it affecting other page links

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

Phew! demo