Question

我有一个颜色列表，我想添加到我的ul中的每个li，但是在li的数量通过颜色的数量后，我希望颜色从第一种颜色开始。这就是我的意思

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

先谢谢你

Answer 1

使用模数运算符循环。

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

DEMO

Answer 2

您可以使用模数来执行此操作。

初始化一个计数器c，使用c++ % color.length作为索引，因此每当它超过color的长度时，它就会跳回0。

＆＃13;

$(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]);
  });
});

＆＃13;

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

＆＃13;

Answer 3

这是更正后的版本，使用模数得到余数：

$(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]);
  });
});

Answer 4

请尝试以下方法：

$(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。

Answer 5

只需在css background-color之前添加i = i % color.length即可

＆＃13;

$(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]);
  });
});

＆＃13;

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

＆＃13;

将数组列表中的颜色添加到li然后循环回来

5 个答案: