jQuery從UL層次結構中刪除類，除了

Question

請參閱小提琴： 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

按父母的數量對它們進行排序並排除最后一個，因為無論標記如何都將嵌套到最遠的那個，並刪除其余部分的類

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

小提琴

要為每個navpole執行此操作，只需將其包裝在each()

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

小提琴

Answer 2

注意：這假設從根到最深的.active元素只有一條路徑，它包含該根下的所有 .active元素（即沒有分支）。 如果無法保證，那么此解決方案將無效。

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

由於所選元素的順序是它們在文檔中出現的順序，因此“最深”元素不可避免地是最后一個元素，因此我們必須從每個選定元素中刪除該類，但最后一個元素。

DEMO

Answer 3

您可以使用each()循環遍歷.active元素，並在其兄弟元素具有ul子元素時刪除該類：

這里有更新的例子

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

檢查這個演示小提琴

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/