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

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