Setting background colors for classes based on an array

Question

Setting background colors for classes based on an array

I have a total of six div elements on a single page, all sharing the same class. My goal is to give each one a unique color from an array I have prepared. I want to avoid any repetition of colors among these divs.

Currently, I have managed to assign background colors to each div from the array randomly. However, there is a chance that some divs might end up with the same color due to the random selection process.

jQuery(document).ready(function($) {
$(".et_pb_post").each(function() {
  var colors = ["#CFEAEA","#c9e3d5","#e7dadd","#dde9eb","#ecfac7","#facba9","#dfdbd3","#f1fdc1"];                
  var rand = Math.floor(Math.random()*colors.length);    
    $(this).css("background-color", colors[rand]);
});
});

The corresponding HTML code looks something like this:

<div class="et_pb_post">Some content with bg-color A</div>
<div class="et_pb_post">Some content with bg-color B</div>
<div class="et_pb_post">Some content with bg-color C</div>
<div class="et_pb_post">Some content with bg-color D</div>

Is there a way to ensure that each background color used is truly unique?

Thank you for your assistance!

javascript css arrays

Answer 1

Answer №1

If you're looking to achieve this, one method is to duplicate the colors array and eliminate the selected color from it whenever it's assigned to a div :

jQuery(document).ready(function($) {
  var colors = ["#CFEAEA ", "#c9e3d5", "#e7dadd", "#dde9eb", "#ecfac7", "#facba9", "#dfdbd3", "#f1fdc1"];

  var copy = [...colors];

  $(".et_pb_post").each(function() {

    var rand = Math.floor(Math.random() * copy.length);
    $(this).css("background-color", copy[rand]);

    copy = copy.filter(color => color !== copy[rand]);

  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="et_pb_post">Some content with bg-color A</div>
<div class="et_pb_post">Some content with bg-color B</div>
<div class="et_pb_post">Some content with bg-color C</div>
<div class="et_pb_post">Some content with bg-color D</div>

Answer 2

If you're looking to achieve this, one method is to duplicate the colors array and eliminate the selected color from it whenever it's assigned to a div :

jQuery(document).ready(function($) {
  var colors = ["#CFEAEA ", "#c9e3d5", "#e7dadd", "#dde9eb", "#ecfac7", "#facba9", "#dfdbd3", "#f1fdc1"];

  var copy = [...colors];

  $(".et_pb_post").each(function() {

    var rand = Math.floor(Math.random() * copy.length);
    $(this).css("background-color", copy[rand]);

    copy = copy.filter(color => color !== copy[rand]);

  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="et_pb_post">Some content with bg-color A</div>
<div class="et_pb_post">Some content with bg-color B</div>
<div class="et_pb_post">Some content with bg-color C</div>
<div class="et_pb_post">Some content with bg-color D</div>

Answer 3

Answer №2

To start, I recommend shuffling the array with random values by following the steps outlined here:

How to randomize (shuffle) a JavaScript array?

After shuffling, each time you use a value from the array, be sure to eliminate it using pop() (or shift()).

This method guarantees that every value in the array is used only once.

Answer 4

To start, I recommend shuffling the array with random values by following the steps outlined here:

How to randomize (shuffle) a JavaScript array?

After shuffling, each time you use a value from the array, be sure to eliminate it using pop() (or shift()).

This method guarantees that every value in the array is used only once.

Answer 5

Answer №3

If you want to select a group of elements from the DOM, such as divs, you can do so like this:

var selectedDivs = document.getElementsByClassName("et_pb_post");

From there, you can iterate through each element using a loop and assign background colors from an array based on the loop counter.

for (var i = 0; i < colors.length; i++)
{
    selectedDivs[i].style.backgroundColor = colors[i];
}

The key here is utilizing a single loop with an index to coordinate between the two arrays - one containing the div elements and the other holding the colors.

Answer 6

If you want to select a group of elements from the DOM, such as divs, you can do so like this:

var selectedDivs = document.getElementsByClassName("et_pb_post");

From there, you can iterate through each element using a loop and assign background colors from an array based on the loop counter.

for (var i = 0; i < colors.length; i++)
{
    selectedDivs[i].style.backgroundColor = colors[i];
}

The key here is utilizing a single loop with an index to coordinate between the two arrays - one containing the div elements and the other holding the colors.

Answer 7

Answer №4

To ensure that a color is not repeated, you can eliminate the selected color from the list of available colors. Additionally, I have eliminated the need for jQuery in this code snippet.

// define an array of colors
let colors = ["#CFEAEA", "#c9e3d5", "#e7dadd", "#dde9eb", "#ecfac7", "#facba9", "#dfdbd3", "#f1fdc1"];

// iterate through all elements with the class .et_pb_post
document.querySelectorAll('.et_pb_post')
  .forEach((post) => {
    // select a random color from the colors array
    const randomColor = colors[Math.floor(Math.random() * colors.length)];

    // set the background color of the current post element
    post.style.backgroundColor = randomColor;

    // update the colors array to remove the selected randomColor
    colors = colors.filter((color) => color !== randomColor);
  });

Answer 8

To ensure that a color is not repeated, you can eliminate the selected color from the list of available colors. Additionally, I have eliminated the need for jQuery in this code snippet.

// define an array of colors
let colors = ["#CFEAEA", "#c9e3d5", "#e7dadd", "#dde9eb", "#ecfac7", "#facba9", "#dfdbd3", "#f1fdc1"];

// iterate through all elements with the class .et_pb_post
document.querySelectorAll('.et_pb_post')
  .forEach((post) => {
    // select a random color from the colors array
    const randomColor = colors[Math.floor(Math.random() * colors.length)];

    // set the background color of the current post element
    post.style.backgroundColor = randomColor;

    // update the colors array to remove the selected randomColor
    colors = colors.filter((color) => color !== randomColor);
  });

Answer 9

Answer №5

jQuery(document).ready(function($) {
var index = 0;
$(".et_pb_post").each(function(item) {
  var colors = ["#CFEAEA ","#c9e3d5","#e7dadd","#dde9eb","#ecfac7","#facba9","#dfdbd3","#f1fdc1"];
  var colorsLength = colors.length;
  var colorIndex = index%colorsLength;   
    $(this).css("background-color", colors[colorIndex]);
    index++;
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="et_pb_post">Content with background color A</div>
<div class="et_pb_post">Content with background color B</div>
<div class="et_pb_post">Content with background color C</div>
<div class="et_pb_post">Content with background color D</div>

Answer 10

jQuery(document).ready(function($) {
var index = 0;
$(".et_pb_post").each(function(item) {
  var colors = ["#CFEAEA ","#c9e3d5","#e7dadd","#dde9eb","#ecfac7","#facba9","#dfdbd3","#f1fdc1"];
  var colorsLength = colors.length;
  var colorIndex = index%colorsLength;   
    $(this).css("background-color", colors[colorIndex]);
    index++;
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="et_pb_post">Content with background color A</div>
<div class="et_pb_post">Content with background color B</div>
<div class="et_pb_post">Content with background color C</div>
<div class="et_pb_post">Content with background color D</div>

Setting background colors for classes based on an array

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

When attempting to display an updated value in a dialog window using an ajax response for the second time, the change

Managing dynamically appearing elements in Ember: Executing a Javascript function on them

Centering a Font Awesome icon within its parent element

Determining the percentage between two elements using Bootstrap 4's range slider

When Components in Vue are called in a Single File, certain elements may not be displaying as expected

Prevent sidebar from adjusting size according to text length

Error when compiling TypeScript: The callback function provided in Array.map is not callable

How can I locate the following table after choosing an element using a jQuery selector?

Bootstrap CSS: arranging columns for mobile devices

Utilizing jQuery's multiple pseudo selectors with the descendant combinator to target specific elements

React component failing to update upon rerender

What is the best way to synchronize the state of a single React component across various pages?

What is the best approach to transforming my jQuery function into CSS to ensure responsiveness?

The Datatable fails to render the JSON data

Activate just the show more / show less button on the website that has several buttons with identical ids

My pen doesn't accurately display the ID

Deactivating a Vue custom filter when hovering over it

Implement the parent jQuery library within a child iframe

Retrieve the file from Amazon S3 and download it

Tips for creating a stylish, blurred, and centered box for a login form on a full-size background that is also responsive