如何使用jQuery每个项目的背景色设置为下一个项目？(How to set background

我有一个列表具有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:

我认为这个解决方案是最好（多半是因为你并不真正需要知道子元素的数量）。

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

 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>

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

 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>

参考文献：