每个元素的颜色随机

Question

我想使容器中的每个元素具有从数组中随机选择的不同背景色。如何让脚本针对每个新元素分别运行？

$(document).ready(function(){
  var colors = ["#ff0000","#ff00ff","#00ff00"];                
  var rand = Math.floor(Math.random()*colors.length);           
  $('.resource-cards > div').css("background-color", colors[rand]);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="resource-cards">
  <div>some text</div>
  <div>some text</div>
  <div>some text</div>
  <div>some text</div>
  <div>some text</div>
  <div>some text</div>
</div>

Answer 1

您可以each用来遍历每个div并分配随机颜色。

$(document).ready(function() {

  $('.resource-cards > div').each(function() {
    var colors = ["#ff0000", "#ff00ff", "#00ff00"];
    var rand = Math.floor(Math.random() * colors.length);
    $(this).css("background-color", colors[rand]);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="resource-cards">
  <div>some text</div>
  <div>some text</div>
  <div>some text</div>
  <div>some text</div>
  <div>some text</div>
  <div>some text</div>
</div>