Question

请参阅小提琴：http://jsfiddle.net/3mpire/yTzGA/1/

使用jQuery如何从所有LI中删除“active”类，除了从根目录中最远（最深）的那个？

<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

按父母的数量对它们进行排序并排除最后一个，因为无论标记如何都会嵌套到最远的那个，并删除其余部分的课程

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

Answer 2

注意：这假设从根到最深的.active元素只有一条路径，其中包含所有 .active元素在那个根下（即没有分支）。如果无法保证，那么此解决方案将无效。

$('.navpole .active').slice(0, -1).removeClass('active');

由于所选元素的顺序是它们在文档中出现的顺序，因此“最深”元素不可避免地是最后一个元素，因此我们必须从每个选定元素中删除该类，但最后一个元素。< / p>

DEMO

Answer 3

您可以使用each()循环遍历.active元素，并在其兄弟元素具有ul子元素时删除该类：

UPDATED EXAMPLE HERE

$('.navpole .active').each(function(){
    if($(this).siblings().children('ul').length > 0 ){
        $(this).removeClass('active');
    }
});

Answer 4

如果您想将最后一个.active项目保留到每个.navpole中，您可以执行以下操作：

$(document).ready(function () {
    //For each navpole
    $('.navpole').each(function(){
    //Find number of active elements
        var len = $('.active',this).length;
    //Filter that elements and remove class for all elements except the last one
        $('.active',this).filter(function(index){
        return index != len-1;
        }).removeClass('active');
    }) 
});

选中 Demo Fiddle

Answer 5

试一试。 adeneo的前一个示例很棒，但如果在层次结构的最低级别有两个活动节点并且希望保留所有活动状态，则会出现问题。如果它们在层次结构中处于同一级别，则此版本将保留所有最低节点。

$(document).ready(function () {
    $('.navpole').each(function () {
        var active = $(this).find(".active").map(function () {
            return $(this).parents().length;
        });
        var maxParents = Math.max.apply(Math, active);
        $(this).find(".active").each(function () {
            if ($(this).parents().length != maxParents) $(this).removeClass("active");
        });
    });
});

这里有一个小提琴来说明： http://jsfiddle.net/CGcr9/1/

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

5 个答案: