将预定义的颜色序列应用于元素的动态列表

Apply a predefined sequence of colors to a dynamic list of elements

本文关键字：元素 动态 应用于 列表 预定义 颜色      更新时间：2023-09-26
  • 想象一下一系列重复的元素。在下面的示例中.Block
  • 想象一个预先定义的颜色列表red, blue, geen, orange, purple

问题

如何为每个.Block分配一个独特的背景颜色，并注意以下事项：

  • 容器中的块数量是动态的，因此可以包含任何数量
  • 如果块的数量超过预定义颜色的数量，则应重复颜色序列

注意： 我试图在css中解决这个问题，但如果需要，将使用javascript和jquery

.Block{
  display:block;
  height:50px;
  width:100%;
  background:red;
}
<div class="Wrap">
  <div class="Block">RED</div>
  <div class="Block">BLUE</div>
  <div class="Block">GREEN</div>
  <div class="Block">ORANGE</div>
  <div class="Block">PURPLE</div>
</div>

您可以在CSS3中使用第n个子选择器来完成此操作。第n个子选择器接受简单表达式，您可以使用这些表达式来定位序列中的某些元素。

.Block{
  display:block;
  height:50px;
  width:100%;
  background:red;
}
.Block:nth-child(5n + 1){
    background-color: red;
}
.Block:nth-child(5n + 2){
    background-color: blue;
}
.Block:nth-child(5n + 3){
    background-color: green;
}
.Block:nth-child(5n + 4){
    background-color: orange;
}
.Block:nth-child(5n + 5){
    background-color: purple;
}

这是通过瞄准每二个元素，然后瞄准每三个元素等来实现的，这意味着无论你的容器中有多少"块"，序列都会循环。

这里的工作演示：

.Block {
  display: block;
  height: 50px;
  width: 100%;
}
.Block:nth-child(5n + 1) {
  background-color: red;
}
.Block:nth-child(5n + 2) {
  background-color: blue;
}
.Block:nth-child(5n + 3) {
  background-color: green;
}
.Block:nth-child(5n + 4) {
  background-color: orange;
}
.Block:nth-child(5n + 5) {
  background-color: purple;
}
<div class="Wrap">
  <div class="Block">RED</div>
  <div class="Block">BLUE</div>
  <div class="Block">GREEN</div>
  <div class="Block">ORANGE</div>
  <div class="Block">PURPLE</div>
  <div class="Block">RED</div>
  <div class="Block">BLUE</div>
  <div class="Block">GREEN</div>
  <div class="Block">ORANGE</div>
  <div class="Block">PURPLE</div>
</div>

浏览器对此的支持是IE9+，但是如果您需要针对较旧的浏览器，则存在polyfill。这里有一些关于第n个孩子如何工作的更有用的信息：http://css-tricks.com/how-nth-child-works/

如果一次添加内容，您可以这样做（或者每次更改内容时都运行脚本）：

 function styleBlock() {
    var colors = ["red","blue","yellow"],
        counter = 0;    
    $(".Wrap .Block").each(function(){   
        $(this).css("background-color",colors[counter ]);
        counter = counter % colors.length;
        counter += 1;
    });
}
$(".Wrap").append('<div class="Block">DYNAMICALLY ADDED</div>');
styleBlock();

我现在正在做一些研究，看看是否有可能只使用CSS。

此处的代码片段：

function styleBlock() {
  var colors = ["red", "blue", "yellow"],
    counter = 0;
  $(".Wrap .Block").each(function() {
    $(this).css("background-color", colors[counter]);
    counter = counter % colors.length;
    counter += 1;
  });
}
$(".Wrap").append('<div class="Block">DYNAMICALLY ADDED</div>');
styleBlock();
.Block {
  display: block;
  height: 50px;
  width: 100%;
  background: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="Wrap">
  <div class="Block">RED</div>
  <div class="Block">BLUE</div>
  <div class="Block">GREEN</div>
  <div class="Block">ORANGE</div>
  <div class="Block">PURPLE</div>
</div>

相关文章：