javascript - How to set a random color for each group of elements looping through an array?

I am trying to set a different colors using jquery on each .elements, their children (.element) should have the same color but the attribution of color should be random for each .elements. How can I do it ?

Here's an example : /

Html

<div class="elements"> <!-- children share the same color -->
  <div class="element">1</div> <!-- exmaple : red -->
  <div class="element">2</div> <!-- exmaple : red -->
</div>

<div class="elements"> <!-- children share the same color -->
  <div class="element">3</div> <!-- exmaple : blue -->
  <div class="element">4</div> <!-- exmaple : blue -->
  <div class="element">5</div> <!-- exmaple : blue -->
</div>

<div class="elements"> <!-- children share the same color -->
  <div class="element">6</div> <!-- exmaple : yellow -->
</div>

<div class="elements"> <!-- children share the same color -->
  <div class="element">7</div> <!-- exmaple : blue -->
  <div class="element">8</div> <!-- exmaple : blue -->
</div>

Javascript : This is what I tried but everything stay on the same color.

function eachEl(el){
    var items = ["blue", "red", "yellow"];
    var item = items[Math.floor(Math.random()*items.length)];
    $(el).css({
        "color": item,
    });
}

$(".elements").each(function() {
    eachEl('.element');
});

Any solution ?

Here's an example : https://jsfiddle/auscpzy6/6/

Html

<div class="elements"> <!-- children share the same color -->
  <div class="element">1</div> <!-- exmaple : red -->
  <div class="element">2</div> <!-- exmaple : red -->
</div>

<div class="elements"> <!-- children share the same color -->
  <div class="element">3</div> <!-- exmaple : blue -->
  <div class="element">4</div> <!-- exmaple : blue -->
  <div class="element">5</div> <!-- exmaple : blue -->
</div>

<div class="elements"> <!-- children share the same color -->
  <div class="element">6</div> <!-- exmaple : yellow -->
</div>

<div class="elements"> <!-- children share the same color -->
  <div class="element">7</div> <!-- exmaple : blue -->
  <div class="element">8</div> <!-- exmaple : blue -->
</div>

Javascript : This is what I tried but everything stay on the same color.

function eachEl(el){
    var items = ["blue", "red", "yellow"];
    var item = items[Math.floor(Math.random()*items.length)];
    $(el).css({
        "color": item,
    });
}

$(".elements").each(function() {
    eachEl('.element');
});

Any solution ?

Share Improve this question edited Jul 5, 2017 at 9:04 asked Jul 5, 2017 at 9:02 Horai Nuri 5,57817 gold badges84 silver badges136 bronze badges

Add a ment |

7 Answers 7

Sorted by: Reset to default 3

To achieve this you need to loop through the .elements, choose a random colour from the array then set colour on that element.

The issue with your code was in the final part, as you were providing a selector which retrieved all the .elements to perform the css() call on, instead of the current one in the iteration. Try this, and note the use of this within the each loop to amend each specific element:

$(".elements").each(function() {
  var items = ["blue", "red", "yellow"];
  var colour = items[Math.floor(Math.random() * items.length)];
  $(this).css('color', colour);
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="elements">
  <div class="element">1</div>
  <div class="element">2</div>
</div>

<div class="elements">
  <div class="element">3</div>
  <div class="element">4</div>
  <div class="element">5</div>
</div>

<div class="elements">
  <div class="element">6</div>
</div>

<div class="elements">
  <div class="element">7</div>
  <div class="element">8</div>
</div>

The problem is that you are passing '.element' instead of $(this), this should works:

function eachEl(el) {
  var items = ["blue", "red", "yellow"];
  var item = items[Math.floor(Math.random() * items.length)];
  $(el).css({
    "color": item,
  });
}

$(".elements").each(function() {
  eachEl($(this));
});

You could passing with $(this) instead of .element in eachEl function , change like this eachEl($(this))

function eachEl(el) {
  var items = ["blue", "red", "yellow"];
  var item = items[Math.floor(Math.random() * items.length)];
  $(el).css({
    "color": item,
  });
}

$(".elements").each(function() {
  eachEl($(this));
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="elements">
  <!-- children share the same color -->
  <div class="element">1</div>
  <!-- exmaple : red -->
  <div class="element">2</div>
  <!-- exmaple : red -->
</div>

<div class="elements">
  <!-- children share the same color -->
  <div class="element">3</div>
  <!-- exmaple : blue -->
  <div class="element">4</div>
  <!-- exmaple : blue -->
  <div class="element">5</div>
  <!-- exmaple : blue -->
</div>

<div class="elements">
  <!-- children share the same color -->
  <div class="element">6</div>
  <!-- exmaple : yellow -->
</div>

<div class="elements">
  <!-- children share the same color -->
  <div class="element">7</div>
  <!-- exmaple : blue -->
  <div class="element">8</div>
  <!-- exmaple : blue -->
</div>

Instead of eachEl('.element'); you need to use eachEl($(this).find('.element'));. Your code was taking elements that have class as element but you need only child element of the current elements.

function eachEl(el) {
  var items = ["blue", "red", "yellow"];
  var item = items[Math.floor(Math.random() * items.length)];
  $(el).css({
    "color": item,
  });
}

$(".elements").each(function() {
  eachEl($(this).find('.element'));
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="elements">
  <!-- children share the same color -->
  <div class="element">1</div>
  <!-- exmaple : red -->
  <div class="element">2</div>
  <!-- exmaple : red -->
</div>

<div class="elements">
  <!-- children share the same color -->
  <div class="element">3</div>
  <!-- exmaple : blue -->
  <div class="element">4</div>
  <!-- exmaple : blue -->
  <div class="element">5</div>
  <!-- exmaple : blue -->
</div>

<div class="elements">
  <!-- children share the same color -->
  <div class="element">6</div>
  <!-- exmaple : yellow -->
</div>

<div class="elements">
  <!-- children share the same color -->
  <div class="element">7</div>
  <!-- exmaple : blue -->
  <div class="element">8</div>
  <!-- exmaple : blue -->
</div>

All the answers provided are correct, where you need to just replace '.element' with this. But I will take it one step further also to show how to get unique color for each element div.

Solution: Just remove the color from the array once applied, so it does not apply again.

function eachEl(el) {
  var items = ["blue", "red", "yellow"];
  var item = items[Math.floor(Math.random() * items.length)];
  $(el).css({
    "color": item,
  });
  items.splice(items.indexOf(item), 1); //remove the color just applied
}

$(".elements").each(function() {
  eachEl(this);
});

you need to pass eachEl(this) instead of eachEl('.element') and then set color of all children of el to randomly selected color;

function eachEl(el) {
  var items = ["blue", "red", "yellow"];
  var item = items[Math.floor(Math.random() * items.length)];
  $(el).children('.element').css({
    "color": item,
  });
}

$(".elements").each(function() {
  eachEl(this);
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="elements">
  <!-- children share the same color -->
  <div class="element">1</div>
  <!-- exmaple : red -->
  <div class="element">2</div>
  <!-- exmaple : red -->
</div>

<div class="elements">
  <!-- children share the same color -->
  <div class="element">3</div>
  <!-- exmaple : blue -->
  <div class="element">4</div>
  <!-- exmaple : blue -->
  <div class="element">5</div>
  <!-- exmaple : blue -->
</div>

<div class="elements">
  <!-- children share the same color -->
  <div class="element">6</div>
  <!-- exmaple : yellow -->
</div>

<div class="elements">
  <!-- children share the same color -->
  <div class="element">7</div>
  <!-- exmaple : blue -->
  <div class="element">8</div>
  <!-- exmaple : blue -->
</div>

function ChangeColorCtrl($) {
  const colors = ['red', 'yellow', 'blue', 'green'];
  
  return $('.elements')
    .each((i, group) => {
      const background = colors[Math.floor(Math.random() * colors.length)];
      
      return $(group)
        .each((j, child) => $(child).css({background}))
      ;
    })
  ;
}

jQuery(document).ready(ChangeColorCtrl);

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="elements"> <!-- children share the same color -->
  <div class="element">1</div> <!-- exmaple : red -->
  <div class="element">2</div> <!-- exmaple : red -->
</div>

<div class="elements"> <!-- children share the same color -->
  <div class="element">3</div> <!-- exmaple : blue -->
  <div class="element">4</div> <!-- exmaple : blue -->
  <div class="element">5</div> <!-- exmaple : blue -->
</div>

<div class="elements"> <!-- children share the same color -->
  <div class="element">6</div> <!-- exmaple : yellow -->
</div>

<div class="elements"> <!-- children share the same color -->
  <div class="element">7</div> <!-- exmaple : blue -->
  <div class="element">8</div> <!-- exmaple : blue -->
</div>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How to set a random color for each group of elements looping through an array? - Stack Overflow

7 Answers 7

与本文相关的文章

评论列表(0)