Javascript菜單樣式 - 循環內循環

Question

代碼文位於：http://codepen.io/saltcod/pen/ufiHr

我試圖設置菜單樣式。我希望每個項目都具有不同的背景不透明度 - 該部分正在工作。

我弄不清楚的部分是如何重置項目＃5後的不透明度。當循環達到項目＃6時，我希望不透明度回到＃1中的水平。

如果不作出任何意義上說，這裏有一個畫面：http://cl.ly/image/0x3e350H0l0o

我基本上要改變混濁五次，然後在頂部重新開始。

JS：

var menuItems = $('li a'); 

menuItems.each(function(index, value){ 
    var index = index + 1; 
     startOpacity = .2 + index/10; 
     counter = .05; 
    $(this).css({'background-color': 'rgba(255,255,255,'+startOpacity+')'}); 
    $(this).append(" " + index); 

}); 

Answer 1

你可以把模運算符的幫助下回收。

menuItems.each(function (index, value) { 
    var index = index + 1, 
     startOpacity, 
     counter, $this = $(this); 

    startOpacity = .2 + (index % 5)/10; //Here, you can give probably half the number of your menu items instead of 5 
    counter = .05; 

    $this.css({ 
     'background-color': 'rgba(255,255,255,' + startOpacity + ')' 
    }).append(" " + index); 

}); 

CodePen