javascript - jQuery 从 UL 层次结构中删除类，除了

Question

参见 fiddle :http://jsfiddle.net/3mpire/yTzGA/1/

使用 jQuery 如何从所有 LI 中删除“事件”类，除了离根最远(最深)的那个？

<div class="navpole">
    <ul>
        <li class="active"><a href="#">Lorem ipsum</a></li>
        <li><a href="#">Lorem ipsum</a>
            <ul>
                <li class="active"><a href="#">Lorem ipsum</a></li>
                <li><a href="#">Lorem ipsum</a></li>
                <li><a href="#">Lorem ipsum</a>
                     <ul>
                          <li class="active"><a href="#">Lorem ipsum</a></li>
                          <li><a href="#">Lorem ipsum</a></li>
                     </ul>
                </li>
                <li><a href="#">Lorem ipsum</a></li>
            </ul>
        </li>
        <li><a href="#">Lorem ipsum</a></li>
        <li><a href="#">Lorem ipsum</a></li>
    </ul>
</div>

这是期望的结果:

<div class="navpole">
    <ul>
        <li><a href="#">Lorem ipsum</a></li>
        <li><a href="#">Lorem ipsum</a>
            <ul>
                <li><a href="#">Lorem ipsum</a></li>
                <li><a href="#">Lorem ipsum</a></li>
                <li><a href="#">Lorem ipsum</a>
                     <ul>
                          <li class="active"><a href="#">Lorem ipsum</a></li>
                          <li><a href="#">Lorem ipsum</a></li>
                     </ul>
                </li>
                <li><a href="#">Lorem ipsum</a></li>
            </ul>
        </li>
        <li><a href="#">Lorem ipsum</a></li>
        <li><a href="#">Lorem ipsum</a></li>
    </ul>
</div>

Answer 1

按 parent 的数量对它们进行排序，并排除最后一个，因为无论标记如何，这将是嵌套最远的那个，并删除其余的类

$('.active').sort(function(a,b) {
    return $(a).parents().length > $(b).parents().length;
}).not(':last').removeClass('active');

FIDDLE

要为每个导航杆执行此操作，只需将其包装在 each()

中

$('.navpole').each(function() {
    $('.active', this).sort(function(a,b) {
        return $(a).parents().length > $(b).parents().length;
    }).not(':last').removeClass('active');
});

FIDDLE