【学亮IT手记】jQuery each()函数用法实例

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
 6 <script type="text/javascript">
 7     $(function(){
 8         $.each([1,2,3],function(index,value){
 9             alert(index+"=="+value);
10         })
11     })
12 </script>
13 </head>
14 
15 <body>
16     
17 </body>
18 </html>

jquery each()函数用于遍历指定的对象和数组。

语法

$.each(object,callback)

遍历对象

 1 <script type="text/javascript">
 2     $(function(){
 3         var obj = {
 4             "site":"你我他学习吧",
 5             "author":"张学亮"
 6         }
 7         $.each(obj,function(key,value){
 8             alert(key + "==" + value);
 9         })
10     })
11 </script>

遍历数组

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
 6 <script type="text/javascript">
 7     $(function(){
 8         var arr = ["one","two","three","four","five"];
 9         var obj = {one:1,two:2,three:3,four:4,five:5};
10         $.each(arr,function(i,val){
11             $("#"+val).text("我的是 "+val+".");
12             //在three之后停止运行
13             //return (val !== "three");
14         });
15         $.each(obj,function(i,val){
16             $("#"+i).append(document.createTextNode(" - "+val));
17         })
18     })
19 </script>
20 </head>
21 
22 <body>
23     <div id="one"></div>
24     <div id="two"></div>
25     <div id="three"></div>
26     <div id="four"></div>
27     <div id="five"></div>
28 </body>
29 </html>

遍历一个元素

1 <script type="text/javascript">
2     $(function(){
3         var obj = {name:"John",lang:"Java"};
4         
5         $.each(obj,function(key,value){
6             alert("关键词："+key+"==值："+value);
7         })
8     })
9 </script>