Exclude the UL hierarchy from removing a class in jQuery

Question

Exclude the UL hierarchy from removing a class in jQuery

Check out this fiddle to see the code snippet: http://jsfiddle.net/3mpire/yTzGA/1/

I am using jQuery and I need to figure out how to remove the "active" class from all LIs except for the one that is deepest within the hierarchy.

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

This is what I want the outcome to look like:

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

javascript jquery css

Answer 1

Answer №1

Organize them based on the number of parents they have and exclude the last one, which is nested the deepest regardless of markup, then remove the class from the rest.

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

FIDDLE

To apply this to each navpole, simply use a each() function.

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

FIDDLE

Answer 2

Organize them based on the number of parents they have and exclude the last one, which is nested the deepest regardless of markup, then remove the class from the rest.

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

FIDDLE

To apply this to each navpole, simply use a each() function.

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

FIDDLE

Answer 3

Answer №2

Important: Keep in mind that this solution assumes there is only one direct path from the root to the deepest .active element, which encompasses all .active elements below it (without any branching). If this condition cannot be assured, the provided solution may not function correctly.

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

As the selected elements are ordered based on their appearance in the document, the "deepest" element will always be the last one. Therefore, we need to remove the class from every selected element except for the last one.

Check out the DEMO

Answer 4

Important: Keep in mind that this solution assumes there is only one direct path from the root to the deepest .active element, which encompasses all .active elements below it (without any branching). If this condition cannot be assured, the provided solution may not function correctly.

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

As the selected elements are ordered based on their appearance in the document, the "deepest" element will always be the last one. Therefore, we need to remove the class from every selected element except for the last one.

Check out the DEMO

Answer 5

Answer №3

To iterate through the active elements with the use of `each()`, and subsequently remove the class if their sibling elements contain a child element ul:

HERE'S THE UPDATED EXAMPLE

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

Answer 6

To iterate through the active elements with the use of `each()`, and subsequently remove the class if their sibling elements contain a child element ul:

HERE'S THE UPDATED EXAMPLE

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

Answer 7

Answer №4

To only keep the last .active item within each .navpole, you can utilize the following code snippet:

$(document).ready(function () {
    // Iterate through each navpole
    $('.navpole').each(function(){
        // Determine the number of active elements
        var len = $('.active',this).length;
        // Filter out all but the last active element and remove the 'active' class
        $('.active',this).filter(function(index){
            return index != len-1;
        }).removeClass('active');
    }) 
});

Take a look at this Demo Fiddle for reference.

Answer 8

To only keep the last .active item within each .navpole, you can utilize the following code snippet:

$(document).ready(function () {
    // Iterate through each navpole
    $('.navpole').each(function(){
        // Determine the number of active elements
        var len = $('.active',this).length;
        // Filter out all but the last active element and remove the 'active' class
        $('.active',this).filter(function(index){
            return index != len-1;
        }).removeClass('active');
    }) 
});

Take a look at this Demo Fiddle for reference.

Answer 9

Answer №5

Give this a try! While the previous code snippet shared by adeneo is effective, it may encounter issues if there are two active nodes on the same level of the hierarchy and you wish to maintain all their active states. This modified version ensures that all lowest nodes remain selected if they are at the same hierarchy level.

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

To see a demonstration, check out this fiddle: http://jsfiddle.net/CGcr9/1/

Answer 10

Give this a try! While the previous code snippet shared by adeneo is effective, it may encounter issues if there are two active nodes on the same level of the hierarchy and you wish to maintain all their active states. This modified version ensures that all lowest nodes remain selected if they are at the same hierarchy level.

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

To see a demonstration, check out this fiddle: http://jsfiddle.net/CGcr9/1/

Exclude the UL hierarchy from removing a class in jQuery

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Unable to locate image in React framework

What steps can be taken to resolve the error message "Module '../home/featuredRooms' cannot be found, or its corresponding type declarations"?

What causes the variable assigned in the outer subscription's scope to change as the inner subscriptions change?

Angular.js filter issue: "Error: textProvider is not recognized provider"

Using React and Material UI to create a table filtering system with checkboxes

Utilizing ng-repeat $index for locating an element within an array

POST request body is not defined

"Is it possible to move the text on the canvas by dragging it to where you want it to be

Unable to load JQuery from a div element

Progressing through the Material UI LinearProgress bar in steps

What prevents me from extending an Express Request Type?

Is it possible for me to identify the original state of a checkbox when the page first loaded, or the value it was reset to when `reset()` was

Harvest Data from JSON Data Structure

There seems to be a glitch in my JavaScript for loop as it is not iterating for the correct amount that it should

Is your Material UI Responsive Appbar overlapping the main content? Looking for a solution to address this issue?

Making sure Angular picks up on $scope changes

Implementing the passing of value from view to controller in CodeIgniter through an onclick feature

Strategies for Applying Filters in Search Feature on IOS Devices

The backtick is not functioning correctly when trying to append the result in the Internet Explorer browser

class-validator: ensures the correct number of digits are present in numeric values