CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Horai Nuri
Horai Nuri

Reputation: 5578

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 : https://jsfiddle.net/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 ?

Upvotes: 2

Views: 3854

Answers (7)

Rory McCrossan
Rory McCrossan

Reputation: 337560

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.com/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>

Upvotes: 3

Dij
Dij

Reputation: 9808

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.com/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>

Upvotes: 1

Hitmands
Hitmands

Reputation: 14179

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.com/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>

Upvotes: 0

Nikhil Nanjappa
Nikhil Nanjappa

Reputation: 6632

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);
});

Upvotes: 1

Jonathan Mart&#237;nez
Jonathan Mart&#237;nez

Reputation: 269

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));
});

Upvotes: 3

Milan Chheda
Milan Chheda

Reputation: 8249

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.com/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>

Upvotes: 1

prasanth
prasanth

Reputation: 22490

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.com/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>

Upvotes: 1

Related Questions