Question

我有一个列表有4个项目，每个项目都有特定的背景颜色，在样式属性中设置。

<div class="list">
  <div style="background: red"></div>
  <div style="background: blue"></div>
  <div style="background: green"></div>
  <div style="background: yellow"></div>
</div>

我想将每个项目的背景颜色设置为下一个项目。上面的html应该改为

<div class="list">
  <div style="background: yellow"></div>
  <div style="background: red"></div>
  <div style="background: blue"></div>
  <div style="background: green"></div>  
</div>

我有这段代码，但它不起作用。

$(".list > div").each(function(i){
  var index = i == 0 ? 3 : i-1;
  this.style.background = $(".list > div").eq(index)[0].style.background;
});

代码将最后一项的颜色设置为所有项目。什么问题？

setInterval(function(){  
  $(".list > div").each(function(i){
    var index = i == 0 ? 3 : i-1;
    this.style.background = $(".list > div").eq(index)[0].style.background;    
  });
}, 1000);

.list > div { height: 50px }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list">
  <div style="background: red"></div>
  <div style="background: blue"></div>
  <div style="background: green"></div>
  <div style="background: yellow"></div>
</div>

Answer 1

代码问题是在.each() javascript中将最后一项的颜色设置为第一项，然后将此颜色设置为另一项。请参阅底部列表，它是循环的示例：

第1项：更改为item4

yellow

第2项：更改为item1

yellow

第3项：更改为item2

yellow

第4项：更改为item3

yellow

然后所有项目的颜色变为黄色。

您应该在更改之前存储项目的颜色，然后使用存储的颜色更改每个项目的颜色。

setInterval(function(){  
  var colors = $(".list > div").map(function(){
    return this.style.background;
  }).get();
  $(".list > div").each(function(i){    
    var index = i == 0 ? 3 : i-1;
    this.style.background = colors[index];
  });
}, 1000);

.list > div { height: 50px }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list">
  <div style="background: red"></div>
  <div style="background: blue"></div>
  <div style="background: green"></div>
  <div style="background: yellow"></div>
</div>

Answer 2

我认为这个解决方案更好（主要是因为你不需要知道子元素的数量）。

只需取出数组中的最后一个元素并将其移动到第一个元素。然后 - 逐个设置每个子元素的颜色。

＆＃13;

setInterval(function(){  
  var colors = $(".list div").map(function(){
    return this.style.background;
  }).get();
  colors.unshift(colors.pop())
  
  $(".list div").each(function(i){    
    this.style.background = colors[i];
  });
}, 1000);

＆＃13;

.list > div { height: 50px }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list">
  <div style="background: red"></div>
  <div style="background: blue"></div>
  <div style="background: green"></div>
  <div style="background: yellow"></div>
</div>

＆＃13;

Answer 3

虽然您已经发布了自己的答案，但我认为我提供了一个轻微的替代方案，只需要执行相同功能的纯JavaScript（尽管是ES6）：

// setting the enclosed anonymous function to run repeatedly,
// with the interval duration as the second argument, in
// milliseconds, following the anonymous function:
setInterval(function() {

  // retrieving the relevant elements, converting the result of
  // document.querySelectorAll() into an arry, using Array.from():
  let children = Array.from(document.querySelectorAll('.list > div')),

  // retrieving an array of the background-colours of those
  // found elements, using Array.prototype.map() to create a
  // new array from the Array supplied:
    colors = children.map(

      // here we use an arrow function, 'child' is the current
      // array element of the array over which we're iterating

      // window.getComputedStyle(child,null) retrieves the
      // computed CSS properties of the child element, and
      // the backgroundColor property retrieves the current
      // background-color (whether defined in a stylesheet,
      // or in the style attribute):
      child => window.getComputedStyle(child, null).backgroundColor
    );

  // here we use Array.prototype.forEach() to iterate over the
  // children array:
  children.forEach(function(child, index, array) {
    // child: the current array-element of the array
    //        over which we're iterating,
    // index: the index of the current array-element,
    // array: a reference to the array over which we're
    //        iterating.

    // here we set the background-color of the current
    // element to the returned index-value of the
    // expression
    child.style.backgroundColor = colors[

      // index + 1: the 'next' index value,
      // %: the remainder operator,
      // array.length: the length of the current array

      // here we increment the index by 1, we then
      // divide that number by the length of the array;
      // if the index is 0 that gives:
      //   (0+1)%4 = 1,
      //   (1+1)%4 = 2,
      //   (2+1)%4 = 3,
      //   (3+1)%4 = 0
      // we retreive the color held at the returned value
      // in the colors Array and set that as the
      // background-color of the current element:
      (index + 1) % array.length
    ];
  });
}, 1000);

＆＃13;

setInterval(function() {
  let children = Array.from(document.querySelectorAll('.list > div')),
    colors = children.map(child => window.getComputedStyle(child, null).backgroundColor);

  children.forEach(function(child, index, array) {
    child.style.backgroundColor = colors[(index + 1) % array.length];
  });
}, 1000);

＆＃13;

.list > div {
  height: 50px;
  font-size: 2em;
  font-weight: bold;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list">
  <div style="background: red">One</div>
  <div style="background: blue">Two</div>
  <div style="background: green">Three</div>
  <div style="background: yellow">Four</div>
</div>

＆＃13;

参考文献：

如何使用jQuery将每个项目的背景颜色设置为下一个项目？

3 个答案: