Is there a way to efficiently update the CSS class attribute for all list items using just pure JavaScript?

Question

Is there a way to efficiently update the CSS class attribute for all list items using just pure JavaScript?

I am looking to use pure Javascript, not jQuery, to access all elements within a <ul> list and remove the active class from every item except for the one selected in my menu.

Shown below is the list:

<ul id='flash-menu'>
<li id="menu1" class='something active'>item 1</li>
<li id="menu2" class='somethingelse'>item 2</li>
<li id="menu3" class='somethingelse'>item 3</li>
</ul>

This code snippet contains my JavaScript functionality:

if (x < y){
var listItems = document.getElementById('flash-menu').childNodes; 
for (var i=0 ; i<list_items.length ; i++){
        list_items[i].className = list_items[i].className.replace('/\bactive\b/','');
    }
document.getElementById(view_name).className += " active";
}

The last line of this script successfully adds the active class, but I suspect there may be an issue with how I'm targeting and removing classes from other items. Any helpful suggestions would be greatly appreciated! Thank you!

javascript html css

Answer 1

Answer №1

Initially, your regular expression is incorrect:

list_items[i].className.replace(/\bactive\b/, '');

Remember: Avoid using quotes in JavaScript regex. A modified version that works can be found on JsFiddle.

Additionally, I encountered some instances of HTMLTextElements within list_items. These elements are causing issues (Fx3.6/Win7) as they lack the className attribute. To overcome this, you can either:

var list_items = document.getElementById('flash-menu').getElementsByTagName('li');
// Selecting all descendant <li> elements

or by verifying the existence of .className before accessing it in the loop body (example). The latter option is preferable as it only affects direct children (there may be multiple levels of <ul>s within each <li>).

For example,

function updateMenu(view_name) {
    var list_items = document.getElementById('flash-menu').childNodes; 
    for (var i=0, j=list_items.length; i<j; i++){
        var elm = list_items[i];
        if (elm.className) {
            elm.className = elm.className.replace(/\bactive\b/, '');
        }
    }
    document.getElementById(view_name).className += ' active';
}

Answer 2

Initially, your regular expression is incorrect:

list_items[i].className.replace(/\bactive\b/, '');

Remember: Avoid using quotes in JavaScript regex. A modified version that works can be found on JsFiddle.

Additionally, I encountered some instances of HTMLTextElements within list_items. These elements are causing issues (Fx3.6/Win7) as they lack the className attribute. To overcome this, you can either:

var list_items = document.getElementById('flash-menu').getElementsByTagName('li');
// Selecting all descendant <li> elements

or by verifying the existence of .className before accessing it in the loop body (example). The latter option is preferable as it only affects direct children (there may be multiple levels of <ul>s within each <li>).

For example,

function updateMenu(view_name) {
    var list_items = document.getElementById('flash-menu').childNodes; 
    for (var i=0, j=list_items.length; i<j; i++){
        var elm = list_items[i];
        if (elm.className) {
            elm.className = elm.className.replace(/\bactive\b/, '');
        }
    }
    document.getElementById(view_name).className += ' active';
}

Answer 3

Answer №2

To retrieve all list items using JavaScript, you can utilize the getElementsByTagName method:

var listitems = document.getElementsByTagName("li");

This function will return an array containing all the list elements, allowing you to iterate through each item and perform any necessary processing.

Answer 4

To retrieve all list items using JavaScript, you can utilize the getElementsByTagName method:

var listitems = document.getElementsByTagName("li");

This function will return an array containing all the list elements, allowing you to iterate through each item and perform any necessary processing.

Answer 5

Answer №3

If you are dealing with multiple ul elements, the first step is to gather all references to them and then handle each ul individually:

var uls = document.getElementsByTagName("ul");

    for (uli=0;uli<uls.length;uli++) {

        ul = uls[uli];

        if (ul.nodeName == "UL" && ul.className == "classname") {

            processUL(ul);

        }

    }

An example of how the processUL function could look like:

function processUL(ul) {

    if (!ul.childNodes || ul.childNodes.length == 0) return;

    // Loop through LIs

    for (var itemi=0;itemi<ul.childNodes.length;itemi++) {

        var item = ul.childNodes[itemi];

        if (item.nodeName == "LI") {

            // Iterate over items in this LI
 insert your code here 
              .....
        }

    }

}

Additionally, you can also utilize: item.className = "classname"; if there is no need to iterate through the children of LI

Answer 6

If you are dealing with multiple ul elements, the first step is to gather all references to them and then handle each ul individually:

var uls = document.getElementsByTagName("ul");

    for (uli=0;uli<uls.length;uli++) {

        ul = uls[uli];

        if (ul.nodeName == "UL" && ul.className == "classname") {

            processUL(ul);

        }

    }

An example of how the processUL function could look like:

function processUL(ul) {

    if (!ul.childNodes || ul.childNodes.length == 0) return;

    // Loop through LIs

    for (var itemi=0;itemi<ul.childNodes.length;itemi++) {

        var item = ul.childNodes[itemi];

        if (item.nodeName == "LI") {

            // Iterate over items in this LI
 insert your code here 
              .....
        }

    }

}

Additionally, you can also utilize: item.className = "classname"; if there is no need to iterate through the children of LI

Answer 7

Answer №4

When using the code <code>document.getElementById('flash-menu').childNodes

, keep in mind that it will also capture white space nodes along with other child nodes.

To update the menu based on a specified view name, you can use the following function:

function updateMenu(view_name) {

    var list_items = document.getElementById('flash-menu').getElementsByTagName('li'), i; 

    for (i=0 ; i<list_items.length ; i++){
            if (list_items[i].className.indexOf('active') > -1) {
              list_items[i].className = list_items[i].className.replace(/\bactive\b/,'');
            }
        }
    document.getElementById(view_name).className += " active";
}

Answer 8

When using the code <code>document.getElementById('flash-menu').childNodes

, keep in mind that it will also capture white space nodes along with other child nodes.

To update the menu based on a specified view name, you can use the following function:

function updateMenu(view_name) {

    var list_items = document.getElementById('flash-menu').getElementsByTagName('li'), i; 

    for (i=0 ; i<list_items.length ; i++){
            if (list_items[i].className.indexOf('active') > -1) {
              list_items[i].className = list_items[i].className.replace(/\bactive\b/,'');
            }
        }
    document.getElementById(view_name).className += " active";
}

Answer 9

Answer №5

I wholeheartedly concur with jensgram, and I recommend coding in the following manner:

list_items[i].className.replace(/\bactive\b/g, '');

Make sure to include the 'g' modifier in the regex string.

Answer 10

I wholeheartedly concur with jensgram, and I recommend coding in the following manner:

list_items[i].className.replace(/\bactive\b/g, '');

Make sure to include the 'g' modifier in the regex string.

Answer 11

Answer №6

g stands for Global, using ‘/g’ can replace all instances that match the regex. However, if you don't use '/g', only the first instance will be replaced. For example:

var test= "testeetest" ;
alert(test.replace(/e/,"")) ;//result : tsteetest but by using 'g' var test= "testeetest" ;
alert(test.replace(/e/g,"")) ;//result : tsttst

Answer 12

g stands for Global, using ‘/g’ can replace all instances that match the regex. However, if you don't use '/g', only the first instance will be replaced. For example:

var test= "testeetest" ;
alert(test.replace(/e/,"")) ;//result : tsteetest but by using 'g' var test= "testeetest" ;
alert(test.replace(/e/g,"")) ;//result : tsttst

Answer 13

Answer №7

Check out this resource: https://developer.mozilla.org/en-US/docs/Web/API/element.classList I found it very useful for identifying class elements!

Answer 14

Check out this resource: https://developer.mozilla.org/en-US/docs/Web/API/element.classList I found it very useful for identifying class elements!

Answer 15

Answer №8

Here is my humble solution that may not be the most efficient, but it gets the job done for me.

document.addEventListener('DOMContentLoaded', initializeEvents);

function initializeEvents() {
    var menuItems = document.querySelectorAll('nav li');

    for (var i = 0; i < menuItems.length; i++) {
        menuItems[i].addEventListener('mousedown', handleMenuClick);
    }
}

function handleMenuClick() {
    var menuItems = document.querySelectorAll('nav li');
    
    for (var i = 0; i < menuItems.length; i++) {
        menuItems[i].classList.remove('active');
    }

    this.classList.add('active');
}

Answer 16

Here is my humble solution that may not be the most efficient, but it gets the job done for me.

document.addEventListener('DOMContentLoaded', initializeEvents);

function initializeEvents() {
    var menuItems = document.querySelectorAll('nav li');

    for (var i = 0; i < menuItems.length; i++) {
        menuItems[i].addEventListener('mousedown', handleMenuClick);
    }
}

function handleMenuClick() {
    var menuItems = document.querySelectorAll('nav li');
    
    for (var i = 0; i < menuItems.length; i++) {
        menuItems[i].classList.remove('active');
    }

    this.classList.add('active');
}

Is there a way to efficiently update the CSS class attribute for all list items using just pure JavaScript?

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Answer №8

Similar questions

Ways to increase the spacing between content boxes using Bootstrap

Obtaining a cloned HTML object using jQuery in C# the correct way

Repairing a CSS file for Internet Explorer versions 7, 8, and 9

Should I include container-fluid in the body or main level for a Bootstrap 4 website?

AngularJS xeditable: sending updated data to the server

What is the process for generating an auto-incrementing button with a different input field?

What alternative can be used for jquery isotope when JavaScript is not enabled?

Mobile phone web development using HTML5

Anticipated a JavaScript module script, but the server returned a MIME type of text/html as well as text/css. No frameworks used, just pure JavaScript

Issue with Vue Router failing to navigate to the correct hash location

Angular’s ng-repeat function is behaving erratically as objects are displayed in the console

Unable to Load CSS File with Path in ClojureScript Project

Incorporate Monaco Editor into an AngularJS 1.X project

Ways to extract information from a table cell located next to a table cell with colspan

"Enhancing Error Handling in Express with Node.js Middleware for Parsing

Empty HTML fieldset

New ways to style Links in NextJs 13

What is the best way to insert a permanent script tag into the body of a Gatsby site? Can conditional rendering be used to control

Issue encountered - Attempting to provide an object as input parameter to puppeteer function was unsuccessful

Utilizing HTML5 to Access and Update custom data attributes

Is there a way to efficiently update the CSS class attribute for all list items using just pure JavaScript?

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Answer №8

Similar questions

Ways to increase the spacing between content boxes using Bootstrap

Obtaining a cloned HTML object using jQuery in C# the correct way

Repairing a CSS file for Internet Explorer versions 7, 8, and 9

Should I include container-fluid in the body or main level for a Bootstrap 4 website?

AngularJS xeditable: sending updated data to the server

What is the process for generating an auto-incrementing button with a *different input field*?

What alternative can be used for jquery isotope when JavaScript is not enabled?

Mobile phone web development using HTML5

Anticipated a JavaScript module script, but the server returned a MIME type of text/html as well as text/css. No frameworks used, just pure JavaScript

Issue with Vue Router failing to navigate to the correct hash location

Angular’s ng-repeat function is behaving erratically as objects are displayed in the console

Unable to Load CSS File with Path in ClojureScript Project

Incorporate Monaco Editor into an AngularJS 1.X project

Ways to extract information from a table cell located next to a table cell with colspan

"Enhancing Error Handling in Express with Node.js Middleware for Parsing

Empty HTML fieldset

New ways to style Links in NextJs 13

What is the best way to insert a permanent script tag into the body of a Gatsby site? Can conditional rendering be used to control

Issue encountered - Attempting to provide an object as input parameter to puppeteer function was unsuccessful

Utilizing HTML5 to Access and Update custom data attributes

What is the process for generating an auto-incrementing button with a different input field?