Как сделать случайный фон без повтора?

Question

[Александр Осадчий]

Помогите реализовать следующее:

Есть сетка html (grid)

<div class="grid">
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
</div>

Тут сетка

Как с помощью javascript (или jQuery) сделать каждому элементу свой background - рандомно, и чтоб не повторялось. На скрине то, что мне нужно.

Answer 1

[0xD34F]

Кому и какие цвета надо назначить:

const colors = [
  'red', 'blue', 'magenta', 'green', 'yellow',
  'aqua', 'brown', 'silver', 'lime', 'orange',
];

const elements = document.querySelectorAll('.item');

Как получить перетасованные случайным образом элементы массивоподобного объекта:

function shuffled([...arr]) {
  for (let i = arr.length; --i > 0;) {
    const j = Math.random() * -~i | 0;
    [ arr[i], arr[j] ] = [ arr[j], arr[i] ];
  }

  return arr;
}

Вот так всё просто получается:

elements.forEach(function(n, i) {
  n.style.setProperty('background-color', this[i % this.length]);
}, shuffled(colors));

// или

for (const [ i, n ] of shuffled(elements).entries()) {
  n.style.backgroundColor = colors[i % colors.length];
}