Automatically add a class to the current list item in jQuery and remove the class from the

Question

Automatically add a class to the current list item in jQuery and remove the class from the

Here is my HTML code, where I am looking to dynamically swap the classes between two li elements every 2 seconds using jQuery.

<li class="">
    <a href="#">
        <img src="client_logo01.png">
    </a>
</li>

<li class="active">
    <a href="#">
        <img src="client_logo02.png">
    </a>
</li>

This is how I'm attempting to accomplish it:

$('ul li a').click(function() {
    $('ul li.current').removeClass('active');
    $(this).closest('li').addClass('active');
});

However, this current method only works on click events and I need it to happen automatically. Any suggestions?

javascript jquery html css

Answer 1

Answer №1

It is quite evident that this code only runs when clicked, since a click event is the only one bound.

setInterval(function()
{
    // Remove .active class from the active li, select next li sibling.
    var next = $('ul li.active').removeClass('active').next('li');

    // Did we reach the last element? If so: select first sibling
    if (!next.length) next = next.prevObject.siblings(':first');

    // Add .active class to the li next in line.
    next.addClass('active');
}, 2000);

If you run this on document ready, the script will move the active class to the next sibling every 2 seconds.

This code will work regardless of how many li children your ul element has

View the jsfiddle demo here: http://jsfiddle.net/kg4huLrL/2/

Answer 2

It is quite evident that this code only runs when clicked, since a click event is the only one bound.

setInterval(function()
{
    // Remove .active class from the active li, select next li sibling.
    var next = $('ul li.active').removeClass('active').next('li');

    // Did we reach the last element? If so: select first sibling
    if (!next.length) next = next.prevObject.siblings(':first');

    // Add .active class to the li next in line.
    next.addClass('active');
}, 2000);

If you run this on document ready, the script will move the active class to the next sibling every 2 seconds.

This code will work regardless of how many li children your ul element has

View the jsfiddle demo here: http://jsfiddle.net/kg4huLrL/2/

Answer 3

Answer №2

Give this a try: take away the active class from the li element that has the class active, and add the active class to its adjacent li sibling.

   setInterval(function(){
       var $active = $('ul li.active');
       $active.removeClass('active');
       $active.siblings().addClass('active');
   },2000);

Check out the Demo

Answer 4

Give this a try: take away the active class from the li element that has the class active, and add the active class to its adjacent li sibling.

   setInterval(function(){
       var $active = $('ul li.active');
       $active.removeClass('active');
       $active.siblings().addClass('active');
   },2000);

Check out the Demo

Answer 5

Answer №3

If you're looking to implement a recurring function, consider using setInterval. Check out this helpful post on how to utilize it effectively:

Working with setInterval

Answer 6

If you're looking to implement a recurring function, consider using setInterval. Check out this helpful post on how to utilize it effectively:

Working with setInterval

Answer 7

Answer №4

setInterval(function() {
    if($('ul').find('li.active').eq(0).next('li') != null) {
        $('ul').find('li.active').eq(0).removeClass('active').next('li').addClass('active');
    } else {
        $('ul').find('li.active').eq(0).removeClass('active');
        $('ul').find('li').eq(0).addClass('active');
    }
}, 2000);

Answer 8

setInterval(function() {
    if($('ul').find('li.active').eq(0).next('li') != null) {
        $('ul').find('li.active').eq(0).removeClass('active').next('li').addClass('active');
    } else {
        $('ul').find('li.active').eq(0).removeClass('active');
        $('ul').find('li').eq(0).addClass('active');
    }
}, 2000);

Automatically add a class to the current list item in jQuery and remove the class from the

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

"Implementing a fixed header and footer with a scrolling content area within a parent div that has a fixed position for

Tips for implementing and utilizing onclick functions in EJS

Arranging individual spans within a div using CSS for perfect alignment

Exploring Next JS: Effectively altering SVG attributes and incorporating new elements

Efficiency in Javascript coding techniques

The issue encountered while attempting to utilize jspdf for exporting data

Saving the value of array[i] from a for loop into a fresh array results in undefined

Retrieve information from the form and construct a multi-layered array with it

What is the best way to transfer Flow type properties from one React component to another?

Tips for efficiently transferring a retrieved object from App.js to a child component in ReactJS version 16 and above using asynchronous methods

Utilizing jQuery to pinpoint the exact position within a Flexbox container

Dealing with the response data from $http request in AngularJS

Exploring a property within a JavaScript object

What is the best way to display my .js.erb file in this context?

What is the best way to determine if an image already exists in a database where the objects are spread across two distinct SQL tables?

I am facing an issue with the Angular signup page that is using ui-router, as it is unable

Execute a sorted operation with proper authorization

Aligning the navigation links vertically

The error message I'm receiving is saying that the map function is not recognized for the posts variable (posts.map

Customize the antd theme in a create-react-app project without the need to eject webpack