jquery遍历不同色彩的li 

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>无标题文档</title>
 6 <style>
 7 #ulColor li{
 8     width: 100%; height: 20px;
 9 }
10  
11 </style>
12 <script src="http://code.jquery.com/jquery-latest.js"></script>
13 <script type="text/javascript">
14   
15      
16  $(function(){            
17          var lihtml="<li></li>";  
18          var ulC=$('#ulColor');
19          var liC=['red','blue','green','#ccc'];
20             for(var i=0; i<20; i++){
21               lihtml.length=i;
22               ulC.append(lihtml);
23               }
24          var liall=$('#ulColor li');   
25          var lLen=liall.length;
26              for(var j=0;j<lLen;j++){
27                 var liColor=liC[j%liC.length];
28                 liall.eq(j).css('background-color',liColor);
29              }
30      })                       
31              
32 
33 
34     
35 </script>
36 </head>
37 <body>
38  <ul id="ulColor"></ul>
39 </html>

 

posted @ 2016-12-29 16:11  deveil  阅读(521)  评论(0)    收藏  举报