javascript - 获取嵌套 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');，提高效率并防止影响其他页面链接