jQuery $.each用法

最新推荐文章于 2021-03-30 12:01:13 发布

江南风雨2013

最新推荐文章于 2021-03-30 12:01:13 发布

阅读量401

点赞数

分类专栏： jquery 文章标签： jquery的.each

jquery 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

以下内容非原创，来自百度文库http://wenku.baidu.com/view/4796b6145f0e7cd18425368e.html

通过它，你可以遍历对象、数组的属性值并进行处理。

使用说明

each函数根据参数的类型实现的效果不完全一致：

1、遍历对象(有附加参数)

$.each(Object, function(p1, p2) {

this; //这里的this指向每次遍历中Object的当前属性值

p1; p2; //访问附加参数

}, ['参数1', '参数2']);

2、遍历数组(有附件参数)

$.each(Array, function(p1, p2){

this; //这里的this指向每次遍历中Array的当前元素

p1; p2; //访问附加参数

}, ['参数1', '参数2']);

3、遍历对象(没有附加参数)

$.each(Object, function(name, value) {

this; //this指向当前属性的值

name; //name表示Object当前属性的名称

value; //value表示Object当前属性的值

});

4、遍历数组(没有附加参数)

$.each(Array, function(i, value) {

this; //this指向当前元素

i; //i表示Array当前下标

value; //value表示Array当前元素

});

下面提一下jQuery的each方法的几种常用的用法

Js代码
var arr = [ "one", "two", "three", "four"];
$.each(arr, function(){
    alert(this);
});
//上面这个each输出的结果分别为：one,two,three,four

var arr1 = [[1, 4, 3], [4, 6, 6], [7, 20, 9]]
$.each(arr1, function(i, item){
   alert(item[0]);
});
//其实arr1为一个二维数组，item相当于取每一个一维数组，
//item[0]相对于取每一个一维数组里的第一个值
//所以上面这个each输出分别为：1   4   7


var obj = { one:1, two:2, three:3, four:4};
$.each(obj, function(key, val) {
    alert(obj[key]);
});
//这个each就有更厉害了，能循环每一个属性

//输出结果为：1 2 3 4

另一个demo

---------------------------------------

jQuery中的$.each()函数比forEach更加强大,可以用来遍历JavaScript中的任意集合,借来下来我们会举几个jQuery中$.each()函数的用法引申实例,首先先来回顾一下遍历用法的基础:

语法：

1	`$.each( collection, callback(indexInArray, valueOfElement) )`

值得一提的是，forEach 可以很方便的遍历数组和 NodeList ，jQuery 中的 jQuery 对象本身已经部署了这类遍历方法，而在原生 JavaScript 中则可以使用 forEach 方法，但是 IE 并不支持，因此我们可以手动把 forEach 方法部署到数组和 NodeList 中:

 
         if 
          ( !Array.prototype.forEach ){ 
        
         Array.prototype.forEach =  
         function 
         (fn, scope) { 
        
         for 
         (  
         var 
          i = 0, len =  
         this 
         .length; i < len; ++i) { 
        
         fn.call(scope,  
         this 
         [i], i,  
         this 
         ); 
        
         } 
        
         } 
        
         } 
        
         // 部署完毕后 IE 也可以使用 forEach 了 
        
         document.getElementsByTagName( 
         'p' 
         ).forEach( 
         function 
         (e){ 
        
         e.className =  
         'inner' 
         ; 
        
         });

而jQuery中的$.each()函数则更加强大。$.each()函数和$(selector).each()不一样。$.each()函数可以用来遍历任何一个集合，不管是一个JavaScript对象或者是一个数组，如果是一个数组的话，回调函数每次传递一个数组的下标和这个下标所对应的数组的值（这个值也可以在函数体中通过this关键字获取，但是JavaScript通常会把this这个值当作一个对象即使他只是一个简单的字符串或者是一个数字），这个函数返回所遍历的对象，也就是这个函数的第一个参数，注意这里还是原来的那个数组，这是和map的区别。
其中collection代表目标数组，callback代表回调函数（自己定义），回调函数的参数第一个是数组的下标，第二个是数组的元素。当然我们也可以给回调函数只设定一个参数，这个参数一定是下标，而没有参数也是可以的。

例1：传入数组

 
         <!DOCTYPE html>  
        
         <html>  
        
         <head>  
        
         <script src=”http: 
         //code.jquery.com/jquery-latest.js”></script>  
        
         </head>  
        
         <body>  
        
         <script>  
        
         $.each([52, 97],  
         function 
         (index, value) {  
        
         alert(index + ‘: ‘ + value);  
        
         });  
        
         </script>  
        
         </body>  
        
         </html>

输出：

1 2	`0: 52` `1: 97`

例2：如果一个映射作为集合使用,回调函数每次传入一个键-值对

 
         <!DOCTYPE html>  
        
         <html>  
        
         <head>  
        
         <script src=”http: 
         //code.jquery.com/jquery-latest.js”></script>  
        
         </head>  
        
         <body>  
        
         <script>  
        
         var 
          map = {  
        
         ‘flammable 
         ': ‘inflammable' 
         ,  
        
         ‘duh 
         ': ‘no duh' 
        
         };  
        
         $.each(map,  
         function 
         (key, value) {  
        
         alert(key + ‘: ‘ + value);  
        
         });  
        
         </script>  
        
         </body>  
        
         </html>

输出：

1 2	`flammable: inflammable` `duh: no duh`

例3：回调函数中 return false时可以退出$.each(), 如果返回一个非false 即会像在for循环中使用continue 一样, 会立即进入下一个遍历

 
         <!DOCTYPE html>  
        
         <html>  
        
         <head>  
        
         <style>  
        
         div { color:blue; }  
        
         div 
         #five { color:red; }  
        
         </style>  
        
         <script src=”http: 
         //code.jquery.com/jquery-latest.js”></script>  
        
         </head>  
        
         <body>  
        
         <div id=”one”></div>  
        
         <div id=”two”></div>  
        
         <div id=”three”></div>  
        
         <div id=”four”></div>  
        
         <div id=”five”></div>  
        
         <script>  
        
         var 
          arr = [  
         "one" 
         ,  
         "two" 
         ,  
         "three" 
         ,  
         "four" 
         ,  
         "five" 
          ]; 
         //数组  
        
         var 
          obj = { one:1, two:2, three:3, four:4, five:5 };  
         // 对象  
        
         jQuery.each(arr,  
         function 
         () {  
         // this 指定值  
        
         $(“ 
         #” + this).text(“Mine is ” + this + “.”); // this指向为数组的值, 如one, two  
        
         return 
          ( 
         this 
          != “three”);  
         // 如果this = three 则退出遍历  
        
         });  
        
         jQuery.each(obj,  
         function 
         (i, val) {  
         // i 指向键, val指定值  
        
         $(“ 
         #” + i).append(document.createTextNode(” – ” + val));  
        
         });  
        
         </script>  
        
         </body>  
        
         </html>

输出：

1

2

3

4

5

 
         Mine is one. – 1  
        
         Mine is two. – 2  
        
         Mine is three. – 3  
        
         - 4  
        
         - 5