唷！ demo

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

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

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

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

Answer 4

你可以做点什么

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

这会使点击的链接旁边的ul下的所有标记都有一个类allowed。

在嵌套的ul树中获取下一个标记

4 个答案:

唷！ demo