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

Navigational controls for a JavaScript slider - Backward and Forward options

Display webpage content in an Iframe using Javascript after PHP code has been executed

Utilizing CSS to create a repeating background image within a specified container

Right-align the text in the title of the material card

Exploring the intricacies of Jquery in Tapestry weaving

to invoke a jQuery function located on a different webpage

Optimizing your approach to testing deferred always

What is the best way to align the navigation bar to the left using bootstrap?

Save the array as a variable in your JavaScript code so that you can easily access it

The issue with Angular's mat-icon not displaying SVGs masked is currently being investigated

How is the CSS selector affected by the presence of an asterisk (*)?

Troubleshooting Bootstrap 4 problem with varying sizes of div content

Placing an Image in the Right Corner Using jQuery Mobile

Implementing the Facebook like button using JavaScript with XML and XFBML

The vertical scrolling issue arises when the content exceeds the height of the screen

Trigger Knockout bindings once the ajax request has been completed

Electron employee: Concealed BrowserWindow leads to delay in the interface

unique close button design for pop-up video player on YouTube

showing console logs before initializing preferences may lead to inaccurate results

conceal the offspring from the guardians, not the offspring