Loop through an array of div IDs and update their CSS styles individually

Question

Loop through an array of div IDs and update their CSS styles individually

How can I iterate through an array of Div IDs and change their CSS (background color) one after the other instead of all at once? I have tried looping through the array, but the CSS is applied simultaneously to all the divs. Any tips on how to delay the effect so that each div changes its color sequentially would be greatly appreciated.


$("#light").click(function(){
    for (var i=0; i < randomArray.length; i++) {
        $("#" + randomArray[i]).css("backgroundColor", "Black"); //Is there a way to change the colors one by one instead of all together?//
    }
});

javascript jquery css arrays

Answer 1

Answer №1

If you want a cleaner and faster solution, consider using CSS animation delays.

var elements = ["elem1", "elem2", "elem3"];

$("#light").click(function(){

     for (var i=0; i < elements.length; i++) {

         $("#" + elements[i]).addClass("fade-"+i);

     }
});

You now have classes like fade-1, fade-2, fade-3 to work with.

In your CSS file:

.fade-0,.fade-1,.fade-2{
   background-color: black;
   transition: background-color 1s;
}
.fade-1{
   transition-delay: 1s;
}
.fade-2{
   transition-delay: 2s;
}

Answer 2

If you want a cleaner and faster solution, consider using CSS animation delays.

var elements = ["elem1", "elem2", "elem3"];

$("#light").click(function(){

     for (var i=0; i < elements.length; i++) {

         $("#" + elements[i]).addClass("fade-"+i);

     }
});

You now have classes like fade-1, fade-2, fade-3 to work with.

In your CSS file:

.fade-0,.fade-1,.fade-2{
   background-color: black;
   transition: background-color 1s;
}
.fade-1{
   transition-delay: 1s;
}
.fade-2{
   transition-delay: 2s;
}

Answer 3

Answer №2

experiment with this code snippet


let count = 0;
$("#button").click(function(){
      adjustStyle(count);
})
function adjustStyle(number){
if(count < array.length){
     $("#" + array[number]).css("color", "Red");
      count++;
         setTimeout(function(){adjustStyle(count)},1500) 
} 
}

Answer 4

experiment with this code snippet


let count = 0;
$("#button").click(function(){
      adjustStyle(count);
})
function adjustStyle(number){
if(count < array.length){
     $("#" + array[number]).css("color", "Red");
      count++;
         setTimeout(function(){adjustStyle(count)},1500) 
} 
}

Loop through an array of div IDs and update their CSS styles individually

Answer №1

Answer №2

Similar questions

Creating a functional component in React using TypeScript with an explicit function return type

Tips for sending variable from JavaScript to PHP Page through XMLHTTP

Switching from using jQuery.ajax() to fetch() when making requests to a Go REST API endpoint with no payload

Discover the power of utilizing JavaScript to sort through table rows by filtering them based on the selections of multiple checkbox

Why is the React onClick method returning undefined upon the first selection, and why are the values being passed not consistent with

Creating a responsive table layout with CSS

Appium with Node.js (wd) becomes unresponsive when unable to locate element

Using PHP and jQuery to generate push notifications can result in issues with server performance

Tips for transferring an array variable into a div element using AJAX

Ways to resolve the issue with TypeError: CSS2Properties lacking an index property setter for '0'

Steps for customizing the dropdown arrow background color in react-native-material-dropdown-v2-fixed

Unable to make changes to the data

"Troubleshooting: How to Fix Issues with document.getElementById on Dynamic Div

Sort through a list of objects using the criteria from a separate array

The combination of Material UI custom TextField and Yup does not seem to be functioning properly

Consistently Encountering The 404 Error

Modifying the page header content using JavaScript

Loading animation reminiscent of a whirlpool, similar to the movement

Is there a way to verify if the JSON Object array includes the specified value in an array?

Getting the value of a JavaScript variable and storing it in a Python variable within a Python-CGI script