Discovering the element's class within an each loop

Question

Discovering the element's class within an each loop

I am currently working on a dynamic menu system that changes the style of the active page item in the menu. My approach involves utilizing separate body classes for each page and then iterating through the li elements in the menu to find a match with the body class. Once a match is found, I intend to apply new styling to that specific menu item.

Below is the code I have developed so far:

HTML

<body class="home-state">
...

<div class="menu-left">     
  <ul>
    <li class="home-state">
        <a href="/">Home</a>
    </li>
    <li class="work-state">
        <a href="/work">Work</a>
    </li>
    <li class="services-state">
        <a href="/services">Services</a>
    </li>
    <li class="about-state">
        <a href="/about">About</a>
    </li>
    <li class="blog-state">
        <a href="//blog.example.com" target="_blank">Blog</a>
    </li>
    <li class="shop-state">
        <a href="/shop">Shop</a>
    </li>
    <li class="contact-state">
        <a data-toggle="modal" href="#modal-coworking">Contact</a>
    </li>
    <li class="project-state">
        <a href="/brief/index">Project brief</a>
    </li>
  </ul>
</div>

...
</body>

JS

var bodyClass = $("body").attr('class');

$('.menu-left ul li').each(function(){

First: In this section, my aim is to identify the element's class using $(this).attr("class");, but I encountered some issues

    var element = $(this);

Second: I plan to implement an if statement to validate whether the class matches the bodyClass

    console.log(element);

Last: Upon finding a match, I will assign the class .active to the respective li element.

});

javascript jquery html css

Answer 1

Answer №1

If you want elements to have multiple classes, consider using a data- attribute instead of a class in the body element to indicate the current page:

<body data-current="home-state">

With this setup, adding the active class to the correct menu item becomes straightforward:

$("li." + $("body").attr("data-current")).addClass("active")

You don't have to iterate over menu items and compare classes like mentioned in the question. Instead, you can directly select the required li element based on its class.

If the body element does not have a data-current attribute, $("body").attr("data-current") will return undefined. This would lead the code to try selecting an element with $("li.undefined") and adding a class, which may be harmless if no such class exists. However, if you wish to explicitly check for the presence of the data-current attribute:

var current = $("body").attr("data-current")
if (current) {
  $("li." + current).addClass("active")
}

Answer 2

If you want elements to have multiple classes, consider using a data- attribute instead of a class in the body element to indicate the current page:

<body data-current="home-state">

With this setup, adding the active class to the correct menu item becomes straightforward:

$("li." + $("body").attr("data-current")).addClass("active")

You don't have to iterate over menu items and compare classes like mentioned in the question. Instead, you can directly select the required li element based on its class.

If the body element does not have a data-current attribute, $("body").attr("data-current") will return undefined. This would lead the code to try selecting an element with $("li.undefined") and adding a class, which may be harmless if no such class exists. However, if you wish to explicitly check for the presence of the data-current attribute:

var current = $("body").attr("data-current")
if (current) {
  $("li." + current).addClass("active")
}

Answer 3

Answer №2

There are a few different ways to accomplish this task, but here is a straightforward method:

var currentBodyClass = $("body").attr('class');

$("li." + currentBodyClass).addClass("active");

Alternatively, you can utilize a loop to achieve the same result:

var currentBodyClass = $("body").attr('class');

$(".menu-left li").each(function(index, element) {
    if (currentBodyClass === $(this).attr("class")) {
        $(this).addClass("active");
    }
});

Both of these approaches will work effectively.

Answer 4

There are a few different ways to accomplish this task, but here is a straightforward method:

var currentBodyClass = $("body").attr('class');

$("li." + currentBodyClass).addClass("active");

Alternatively, you can utilize a loop to achieve the same result:

var currentBodyClass = $("body").attr('class');

$(".menu-left li").each(function(index, element) {
    if (currentBodyClass === $(this).attr("class")) {
        $(this).addClass("active");
    }
});

Both of these approaches will work effectively.

Answer 5

Answer №3

view the image here

check out this image too

remember, the element may have multiple classes, so be sure to verify each one individually

Answer 6

view the image here

check out this image too

remember, the element may have multiple classes, so be sure to verify each one individually

Answer 7

Answer №4

You forgot to attach the click event to the menu item. Here is an example of how to do it:

var bodyClass = $("body").attr('class');
$('.menu-left ul li').on( "click", function() {
var myClass = $(this).attr("class");
   alert(myClass);
});

Tested and working: https://codepen.io/anon/pen/XzYjGY

Answer 8

You forgot to attach the click event to the menu item. Here is an example of how to do it:

var bodyClass = $("body").attr('class');
$('.menu-left ul li').on( "click", function() {
var myClass = $(this).attr("class");
   alert(myClass);
});

Tested and working: https://codepen.io/anon/pen/XzYjGY

Discovering the element's class within an each loop

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Having trouble establishing a connection between node.js and MongoDB

continuously refresh choices available for selection

Exploring the Process of Setting Up a Temporary Endpoint in Express

Unable to specifically identify or focus on this offspring

How to extract data-bound value from a <span> element using Angular

Can you explain the reference point used in the `drawImage()` function on a canvas?

Tips for Uploading the Contents from 2 Select Boxes

Sending a null variable via an AJAX post request from jQuery to PHP

Error: PageMethods function not recognized on ASPX page

How come my search query in the input form is unable to locate a user in the table?

Footer div is being covered by the page

Is it possible to scroll the grid horizontally?

The process of including a property in Vue.JS

Update the display of the mouse pointer

What is the best way to automatically create a line break once the User Input reaches the end of a Textbox?

When working with angular.js and angular-sanitize.js, the src attribute is removed from JSON HTML data

The next button will only activate once all input forms have been completed in multiple forms

Substitute the information in the table with new data

Error in Heroku deployment - Express and React app displaying a white screen

"What are some strategies for locating a specific item within a MongoDB database, or perhaps querying for all