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

代码的问题是在.each() javascript中设置最后一项的颜色为第一项，然后将此颜色设置为另一项。下面是循环的例子:

• Item1:更改为item4的颜色，即yellow
• Item2:变为item1的颜色即yellow
• Item3:更改为item2的颜色，即yellow
• Item4:更改为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>

我认为这种解决方案更好(主要是因为您实际上不需要知道子元素的数量)。

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

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

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

虽然你已经发布了你自己的答案，我想我提供一个稍微替代，只需要普通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);

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

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

<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>

引用:

• %操作符
• Array.from() .
• Array.prototype.forEach() .
• Array.prototype.map() .
• document.querySelectorAll() .
• HTMLElement.style .
• window.getComputedStyle() .