442day（隔行上色案例）

原创于 2018-12-20 00:06:36 发布 · 134 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一种使用jQuery实现的隔行上色方法，通过遍历列表项并根据索引的奇偶性设置不同的背景颜色，实现了网页列表的美观展示。

《2018年12月20日》【连续442天】

标题：隔行上色案例；
内容：

<body>
  <ul>
    <li>我是第1个li</li>
    <li>我是第2个li</li>
    <li>我是第3个li</li>
    <li>我是第4个li</li>
    <li>我是第5个li</li>
    <li>我是第6个li</li>
    <li>我是第7个li</li>
    <li>我是第8个li</li>
    <li>我是第9个li</li>
    <li>我是第10个li</li>
  </ul>
  <script src="js/jquery-1.12.4.js"></script>
  <script>
    $(function() {
      var lis =$('li');
      for(var i=0;i <lis.length;i++){
        if(i%2 ==0){
          lis[i].style.backgroundColor ='yellow';
        }else{
          lis[i].style.backgroundColor ='red';
        }
      }
    });
  </script>
</body>