如何使用jQuery將每個項目的背景顏色設置為下一個項目？

Question

我有一個包含4個項目的列表，每個項目都有在style屬性中設置的特定背景色。

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

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> 

參考文獻：

• %運算符 。
• Array.from() 。
• Array.prototype.forEach() 。
• Array.prototype.map() 。
• document.querySelectorAll() 。
• HTMLElement.style 。
• window.getComputedStyle() 。