how to change color for each element in a group of identical elements in sequence with a color array-CodePudding

Is the each() method capable of incrementing upon each instance of the element? In addition, how do I make it so that each element gets it's own background color corresponding with the array, with $('colorbox')[0] getting 'yellow', $('colorbox')[1] getting 'blue'..ect. I can't access the property with $('.colorbox')[k].css() or document.querySelector('.colorbox')[k].style.backgroundColor=""; because I get an error. Help would be appreciated.

let test = ['yellow', 'blue', 'purple', 'orange', 'red', 'green'];
$('.colorbox').each(function () {
    let k = 0;
    $(this).css("background-color", `${test[k]}`);
    k  ;
    })

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>HTML 5 Boilerplate</title>
    <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <div >
        <div >
            <div ></div>
            <div ></div>
            <div ></div> 
            <div ></div>
            <div ></div>
            <div ></div>
        </div>
    </div>
    <script src="script.js"></script>
  </body>
</html>

.colorbox {
    display: flex;
    height: 200px;
    width: 200px;
    border: 1px solid black;
    box-sizing: border-box;
    transform: rotateY(180deg);
    transform-style: preserve-3d;
    transition: transform 0.3s ease;
}

CodePudding user response：

You are very close! You're resetting k each time the loop iterates, so you just need to put let k = 0 outside the .each(). But even better than using your own counter, use the internal index you get with the each method, like so:

let test = ['yellow', 'blue', 'purple', 'orange', 'red', 'green'];
$('.colorbox').each(function (index) {
  $(this).css("background-color", `${test[index]}`);
})

You mentioned using querySelector and you're right, you definitely don't need jquery for this:

const boxes = document.querySelectorAll('.colorbox')
boxes.forEach((box, i) => box.style.backgroundColor=test[i])

Here's a snippet showing that:

let test = ['yellow', 'blue', 'purple', 'orange', 'red', 'green'];
/*
$('.colorbox').each(function (index) {
  $(this).css("background-color", `${test[index]}`);
})
*/

const boxes = document.querySelectorAll('.colorbox')
boxes.forEach((box, i) => box.style.backgroundColor = test[i])

.colorbox {
  display: flex;
  height: 200px;
  width: 200px;
  border: 1px solid black;
  box-sizing: border-box;
  transform: rotateY(180deg);
  transform-style: preserve-3d;
  transition: transform 0.3s ease;
}

<div >
  <div >
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
  </div>
</div>