How can I use jQuery to automatically change the background color of each item to match the color of the next

Question

How can I use jQuery to automatically change the background color of each item to match the color of the next

I have a list with 4 items, each item has a specific background color set in the style attribute.

<div class="list">
  <div style="background: red"></div>
  <div style="background: blue"></div>
  <div style="background: green"></div>
  <div style="background: yellow"></div>
</div>

I would like to change the background color of each item to the color of the next item in the list. The HTML code above should be changed to:

<div class="list">
  <div style="background: yellow"></div>
  <div style="background: red"></div>
  <div style="background: blue"></div>
  <div style="background: green"></div>  
</div>

I have tried implementing this code, but it is not working.

$(".list > div").each(function(i){
  var index = i == 0 ? 3 : i-1;
  this.style.background = $(".list > div").eq(index)[0].style.background;
});

The current code sets the color of the last item to all items. What could be the issue?

setInterval(function(){  
  $(".list > div").each(function(i){
    var index = i == 0 ? 3 : i-1;
    this.style.background = $(".list > div").eq(index)[0].style.background;    
  });
}, 1000);

.list > div { height: 50px }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list">
  <div style="background: red"></div>
  <div style="background: blue"></div>
  <div style="background: green"></div>
  <div style="background: yellow"></div>
</div>

javascript jquery html css background-color

Answer 1

Answer №1

The issue with the code is that in the JavaScript function .each(), it sets the color of the last item to the color of the first item and then propagates this color change to the rest of the items. Below is an example of the loop:

Item1: changed to the color of item4, which is yellow
Item2: changed to the color of item1, which is yellow
Item3: changed to the color of item2, which is yellow
Item4: changed to the color of item3, which is yellow

As a result, all items end up being changed to the color yellow.

The solution is to store the colors of the items before making any changes, and then apply the color change to each item using the previously stored colors.

setInterval(function(){  
  var colors = $(".list > div").map(function(){
    return this.style.background;
  }).get();
  $(".list > div").each(function(i){    
    var index = i == 0 ? 3 : i-1;
    this.style.background = colors[index];
  });
}, 1000);

.list > div { height: 50px }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list">
  <div style="background: red"></div>
  <div style="background: blue"></div>
  <div style="background: green"></div>
  <div style="background: yellow"></div>
</div>

Answer 2

The issue with the code is that in the JavaScript function .each(), it sets the color of the last item to the color of the first item and then propagates this color change to the rest of the items. Below is an example of the loop:

Item1: changed to the color of item4, which is yellow
Item2: changed to the color of item1, which is yellow
Item3: changed to the color of item2, which is yellow
Item4: changed to the color of item3, which is yellow

As a result, all items end up being changed to the color yellow.

The solution is to store the colors of the items before making any changes, and then apply the color change to each item using the previously stored colors.

setInterval(function(){  
  var colors = $(".list > div").map(function(){
    return this.style.background;
  }).get();
  $(".list > div").each(function(i){    
    var index = i == 0 ? 3 : i-1;
    this.style.background = colors[index];
  });
}, 1000);

.list > div { height: 50px }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list">
  <div style="background: red"></div>
  <div style="background: blue"></div>
  <div style="background: green"></div>
  <div style="background: yellow"></div>
</div>

Answer 3

Answer №2

In my opinion, this approach is superior (mainly because the exact count of child-elements is not essential).

Simply take the final element in the array and reposition it as the initial one. Next, assign colors to each child-element individually.

setInterval(function(){  
  var colors = $(".list div").map(function(){
    return this.style.background;
  }).get();
  colors.unshift(colors.pop())
  
  $(".list div").each(function(i){    
    this.style.background = colors[i];
  });
}, 1000);

.list > div { height: 50px }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list">
  <div style="background: red"></div>
  <div style="background: blue"></div>
  <div style="background: green"></div>
  <div style="background: yellow"></div>
</div>

Answer 4

In my opinion, this approach is superior (mainly because the exact count of child-elements is not essential).

Simply take the final element in the array and reposition it as the initial one. Next, assign colors to each child-element individually.

setInterval(function(){  
  var colors = $(".list div").map(function(){
    return this.style.background;
  }).get();
  colors.unshift(colors.pop())
  
  $(".list div").each(function(i){    
    this.style.background = colors[i];
  });
}, 1000);

.list > div { height: 50px }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list">
  <div style="background: red"></div>
  <div style="background: blue"></div>
  <div style="background: green"></div>
  <div style="background: yellow"></div>
</div>

Answer 5

Answer №3

Although you've already shared your own solution, I wanted to provide a slightly different approach using plain JavaScript (specifically ES6) to achieve the same outcome:

// This anonymous function runs continuously with a set interval in milliseconds:
setInterval(function() {

  // Gathering the necessary elements and converting the result into an array:
  let children = Array.from(document.querySelectorAll('.list > div')),
    // Creating an array of background-colors of the found elements:
    colors = children.map(
      // Utilizing an arrow function to retrieve the background-color of each element:
      child => window.getComputedStyle(child, null).backgroundColor
    );

  // Iterating over the children array using forEach():
  children.forEach(function(child, index, array) {
    // Setting the background-color of each element based on the calculated index:
    child.style.backgroundColor = colors[
      // Applying a formula using index and array length to determine the new color:
      (index + 1) % array.length
    ];
  });
}, 1000);

setInterval(function() {
  let children = Array.from(document.querySelectorAll('.list > div')),
    colors = children.map(child => window.getComputedStyle(child, null).backgroundColor);

  children.forEach(function(child, index, array) {
    child.style.backgroundColor = colors[(index + 1) % array.length];
  });
}, 1000);

.list > div {
  height: 50px;
  font-size: 2em;
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list">
  <div style="background: red">One</div>
  <div style="background: blue">Two</div>
  <div style="background: green">Three</div>
  <div style="background: yellow">Four</div>
</div>

References:

Answer 6

Although you've already shared your own solution, I wanted to provide a slightly different approach using plain JavaScript (specifically ES6) to achieve the same outcome:

// This anonymous function runs continuously with a set interval in milliseconds:
setInterval(function() {

  // Gathering the necessary elements and converting the result into an array:
  let children = Array.from(document.querySelectorAll('.list > div')),
    // Creating an array of background-colors of the found elements:
    colors = children.map(
      // Utilizing an arrow function to retrieve the background-color of each element:
      child => window.getComputedStyle(child, null).backgroundColor
    );

  // Iterating over the children array using forEach():
  children.forEach(function(child, index, array) {
    // Setting the background-color of each element based on the calculated index:
    child.style.backgroundColor = colors[
      // Applying a formula using index and array length to determine the new color:
      (index + 1) % array.length
    ];
  });
}, 1000);

setInterval(function() {
  let children = Array.from(document.querySelectorAll('.list > div')),
    colors = children.map(child => window.getComputedStyle(child, null).backgroundColor);

  children.forEach(function(child, index, array) {
    child.style.backgroundColor = colors[(index + 1) % array.length];
  });
}, 1000);

.list > div {
  height: 50px;
  font-size: 2em;
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list">
  <div style="background: red">One</div>
  <div style="background: blue">Two</div>
  <div style="background: green">Three</div>
  <div style="background: yellow">Four</div>
</div>

References:

How can I use jQuery to automatically change the background color of each item to match the color of the next

Answer №1

Answer №2

Answer №3

Similar questions

Avoiding duplication of prints in EJS template files

Arrange the array based on the order of the enumeration rather than its values

jQuery function to alternate between appearing and disappearing captions every 5 seconds

Tips on passing a variable into a controller using jQuery AJAX from the URL

I am experiencing an issue where my Laravel website does not refresh automatically

Displaying a loading animation to keep users engaged while AJAX calls retrieve data from the server

Instructions on how to present a list of employee information according to the user's gender preference using a selection of three radio buttons

Revamp the sequence of divs using jQuery

Tips for getting a browser to clear the cache specifically for the .html files on your website

What steps can I take to add a horizontal scroll bar and view the entirety of my image?

Creating a Commitment - Resolving the "Expected ')' after argument list" Error

The controller in Rails3 is not receiving the parameters properly when using coffeescript and ajax

Using jQuery validation to verify that a minimum of one radio button holds a true value

Can SVG use a transformation matrix to switch the values of x and y coordinates?

Utilizing Jquery to extract a specific string from a URL and fetch a remote element

Struggling to extract information from HTML code through Python web scraping techniques

Expanding Images for Optimal Display in Responsive Design

Having issues with handling button click events in jQuery

Having trouble with the page redirection issue? Here's how you can troubleshoot and resolve

Issue with undefined bindingContext.$data in IE9 on knockout binding handler