Get next a tag in nested ul tree
<p>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:</p>

<pre><code>&lt;ul&gt;
    &lt;li&gt;&lt;a href="#" class="allowed"&gt;Link&lt;/a&gt;
        &lt;ul&gt;
            &lt;li&gt;&lt;a href="#" class="allowed"&gt;Link&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#" class="allowed"&gt;Link&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;&lt;a href="#" class="allowed"&gt;Link&lt;/a&gt;
        &lt;ul&gt;
            &lt;li&gt;&lt;a href="#" class="disallowed"&gt;Link&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#" class="disallowed"&gt;Link&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>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".</p>

<p>How can I get the next a tag in the tree?</p>

<p>UPDATE:</p>

<p>What I mean. Before:</p>

<pre><code>&lt;ul&gt;
    &lt;li&gt;&lt;a href="#" class="allowed"&gt;Link&lt;/a&gt;
        &lt;ul&gt;
            &lt;li&gt;&lt;a href="#" class="allowed"&gt;Link&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#" class="allowed"&gt;Link&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;&lt;a href="#" class="allowed"&gt;Link&lt;/a&gt;&lt;!-- this gets clicked on --&gt;
        &lt;ul&gt;
            &lt;li&gt;&lt;a href="#" class="disallowed"&gt;Link&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#" class="disallowed"&gt;Link&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>HTML changes to this:</p>

<pre><code>&lt;ul&gt;
    &lt;li&gt;&lt;a href="#" class="allowed"&gt;Link&lt;/a&gt;
        &lt;ul&gt;
            &lt;li&gt;&lt;a href="#" class="allowed"&gt;Link&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#" class="allowed"&gt;Link&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;&lt;a href="#" class="allowed"&gt;Link&lt;/a&gt;
        &lt;ul&gt;
            &lt;li&gt;&lt;a href="#" class="allowed"&gt;Link&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#" class="disallowed"&gt;Link&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>And so on.</p>
