從數組列表中添加顏色到li然後循環返回

我有一個顏色列表，我想將它添加到每個li中，但是在li的數量超過顏色數量後，我希望顏色開始從第一種顏色。這裏就是我的意思從數組列表中添加顏色到li然後循環返回

$(document).ready(function(){ 
var color=['#0098c3','#bed600','#a30050','#9b1889']; 
$('#div_id ul li').each(function(i){ 
    $(this).css('backgroundColor',color[i]); 
});});

感謝你在先進

來源

2015-01-16 wil lkh

加之前只需添加i = i % color.length'I = I％color.length;'的CSS背景色 –

你可以使用模數來做到這一點。

初始化計數器c，使用c++ % color.length作爲索引所以每次它得到的color長度它跳回0上方。

$(document).ready(function() { 
 
    var color = ['#0098c3', '#bed600', '#a30050', '#9b1889']; 
 
    var c = 0; 
 
    $('#div_id ul li').each(function(i) { 
 
    $(this).css('backgroundColor', color[c++ % color.length]); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="div_id"> 
 
    <ul> 
 
    <li><a href="#">stupid link 1</a> 
 
    </li> 
 
    <li><a href="#">stupid link 2</a> 
 
    </li> 
 
    <li><a href="#">stupid link 3</a> 
 
    </li> 
 
    <li><a href="#">stupid link 4</a> 
 
    </li> 
 
    <li><a href="#">stupid link 5</a> 
 
    </li> 
 
    <li><a href="#">stupid link 6</a> 
 
    </li> 
 
    <li><a href="#">stupid link 7</a> 
 
    </li> 
 
    <li><a href="#">stupid link 8</a> 
 
    </li> 
 

 
    </ul> 
 
</div>

來源

2015-01-16 20:23:55

使用模運算循環周圍。

$(document).ready(function(){ 
    var color=['#0098c3','#bed600','#a30050','#9b1889']; 
    $('#div_id ul li').each(function(i){ 
     $(this).css('backgroundColor',color[i % color.length]); 
    }); 
});

DEMO

來源

2015-01-16 20:24:25 Barmar

下面是修改後的版本，採用模數得到的餘：

$(document).ready(function(){ 
    var color=['#0098c3','#bed600','#a30050','#9b1889']; 
    $('#div_id ul li').each(function(i){ 
     var colorIndex = i % color.length; 
     $(this).css('backgroundColor',color[colorIndex]); 
    }); 
});

來源

2015-01-16 20:27:54 MaxZoom

你爲什麼做了var colorIndex過嗎？你可以把color.length放在數組調用中。 – Red2678

它是一種習慣 - 適合稍後調試或可變重用。 – MaxZoom

我聽到你:)謝謝你的迴應。 – Red2678

也只是嘗試以下操作：

$(document).ready(function(){ 
var color=['#0098c3','#bed600','#a30050','#9b1889']; 
$('#div_id ul li').each(function(i){ 
     i=i % color.length; 
     $(this).css('backgroundColor',color[i]); 
}); 
});

如果i然後到達color.length初始化它;這裏是the working DEMO。

來源

2015-01-16 20:31:39

變量i是ddplicated – MaxZoom

@MaxZoom是的謝謝;這是一個錯字。我糾正了它。 –

太棒了 - 讓箭頭向上 – MaxZoom

的CSS背景色

$(document).ready(function() { 
 
    var color = ['#0098c3', '#bed600', '#a30050', '#9b1889']; 
 
    $('#div_id ul li').each(function(i) { 
 
    i = i % color.length 
 
    $(this).css('backgroundColor', color[i]); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="div_id"> 
 
    <ul> 
 
    <li><a href="#">stupid link 1</a> 
 
    </li> 
 
    <li><a href="#">stupid link 2</a> 
 
    </li> 
 
    <li><a href="#">stupid link 3</a> 
 
    </li> 
 
    <li><a href="#">stupid link 4</a> 
 
    </li> 
 
    <li><a href="#">stupid link 5</a> 
 
    </li> 
 
    <li><a href="#">stupid link 6</a> 
 
    </li> 
 
    <li><a href="#">stupid link 7</a> 
 
    </li> 
 
    <li><a href="#">stupid link 8</a> 
 
    </li> 
 

 
    </ul> 
 
</div>

來源

2015-01-16 20:31:45

從數組列表中添加顏色到li然後循環返回

回答

相關問題