jquery之each方法

最新推荐文章于 2023-11-16 22:16:57 发布

chunchun1230

最新推荐文章于 2023-11-16 22:16:57 发布

阅读量1.7k

点赞数

分类专栏： jQuery点滴

本文链接：https://blog.csdn.net/chunchun1230/article/details/104175509

版权

jQuery点滴专栏收录该内容

22 篇文章 0 订阅

订阅专栏

jQuery.each()函数用于遍历指定的对象和数组，并以对象的每个属性(或数组的每个成员)作为上下文来遍历执行指定的函数。

所谓的上下文，意即该函数内部的this指针引用了该元素。

该函数属于全局jQuery对象。请注意，这与jQuery对象(实例)的each()函数不同。

语法

静态函数jQuery.each()的语法如下：

JavaScript:

jQuery.each( object, callback )

参数

参数	描述
object	Object类型指定需要遍历的对象或数组。
callback	Function类型指定的用于循环执行的函数。

参数object可以是对象或数组。如果是对象，则遍历该对象的每个属性；如果是数组，则遍历该数组中的每个元素。

jQuery.each()函数将根据每个成员(对象的属性或数组的元素)循环调用函数callback。每次调用函数callback时，jQuery.each()函数都会将callback函数内部的this引用指向当前正在迭代的成员，并为其传入两个参数。第一个参数是当前迭代成员在对象或数组中的索引值(从0开始计数)，第二个参数是当前迭代成员(与this的引用相同)。

jQuery.each()的使用：

$.each()是对数组，json和dom结构等的遍历，说一下他的使用方法吧。

1、遍历一维数组

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>jq之each方法</title>
        <script src="jquery-2.0.3.js"></script>
    </head>
    <body>
        <script>
            //遍历一维数组
           var arr1 = ['aa','bb','cc','dd'];
           $.each(arr1,function(i,value){ 
               //两个参数，第一个参数表示遍历的数组的下标，第二个参数表示下标对应的值
              console.log(i+'...'+value);
           });
        </script>
    </body>
</html>

结果：

2、遍历二维数组

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>jq之each方法</title>
        <script src="jquery-2.0.3.js"></script>
    </head>
    <body>
        <script>
    
        //遍历二维数组
        var arr2 = [['aa','bb'],['cc','dd'],['ee','ff']];
        $.each(arr2,function(i,item){
     //两个参数，第一个参数表示下标，第二个参数表示一维数组中的每一个数组
            console.log(i+'...'+ item);
        });
        </script>
    </body>
</html>

结果：

在此基础上还可以对遍历出来的一维数组进行遍历

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>jq之each方法</title>
        <script src="jquery-2.0.3.js"></script>
    </head>
    <body>
        <script>
        
        //遍历二维数组
        var arr2 = [['aa','bb'],['cc','dd'],['ee','ff']];
        $.each(arr2,function(i,item){
            console.log(i+'...'+ item);
            $.each(item,function(i,value){
              console.log(i+'...'+value);
            })
        });
        </script>
    </body>
</html>

结果：

3、处理json

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>jq之each方法</title>
        <script src="jquery-2.0.3.js"></script>
    </head>
    <body>
        <script>
      
        //处理json
        var json1 ={key1:'a',key2:'b',key3:'c'};
        $.each(json1,function(key, value){
           console.log(key+'...'+value);
        });
        </script>
    </body>
</html>

结果：

4、当数组中有json对象时

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>jq之each方法</title>
        <script src="jquery-2.0.3.js"></script>
    </head>
    <body>
        <script>
      
        //当数组中是json对象时
        var arr3 = [{name:'n1',age:18},{name:'n2',age:20},{name:'n3',age:35}];
        $.each(arr3,function(i,value){ //遍历得到数组中的每个json对象
          console.log(i+'...'+value);
          console.log(value.name);//获取每一个json里面的name值
          console.log(value['name']);//获取每一个json里面的name值
          $.each(value,function(key,val){  //遍历得到每个json对象中的每个值
             console.log(key+'...' +val);
          });
        });
        </script>
    </body>
</html>

结果：

5、处理dom元素

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>jq之each方法</title>
        <script src="jquery-2.0.3.js"></script>
    </head>
    <body>
        <input name="aaa" type="hidden" value="111" />
        <input name="bbb" type="hidden" value="222" />
        <input name="ccc" type="hidden" value="333" />
        <input name="ddd" type="hidden" value="444"/>
        <script>
       
        //处理dom元素
        $.each($('input:hidden'),function(i,val){
           console.log(i+'...'+val);
           console.log(val.name+'...'+val.value);
        });
        </script>
    </body>
</html>

结果：

所有用法：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>jq之each方法</title>
        <script src="jquery-2.0.3.js"></script>
    </head>
    <body>
        <input name="aaa" type="hidden" value="111" />
        <input name="bbb" type="hidden" value="222" />
        <input name="ccc" type="hidden" value="333" />
        <input name="ddd" type="hidden" value="444"/>
        <script>
            //遍历一维数组
           var arr1 = ['aa','bb','cc','dd'];
           $.each(arr1,function(i,value){ 
               //两个参数，第一个参数表示遍历的数组的下标，第二个参数表示下标对应的值
              console.log(i+'...'+value);
           });
        //遍历二维数组
        var arr2 = [['aa','bb'],['cc','dd'],['ee','ff']];
        $.each(arr2,function(i,item){
            console.log(i+'...'+ item);
            $.each(item,function(i,value){
              console.log(i+'...'+value);
            })
        });
        //处理json
        var json1 ={key1:'a',key2:'b',key3:'c'};
        $.each(json1,function(key, value){
           console.log(key+'...'+value);
        });
        //当数组中是json对象时
        var arr3 = [{name:'n1',age:18},{name:'n2',age:20},{name:'n3',age:35}];
        $.each(arr3,function(i,value){ //遍历得到数组中的每个json对象
          console.log(i+'...'+value);
          console.log(value.name);//获取每一个json里面的name值
          console.log(value['name']);//获取每一个json里面的name值
          $.each(value,function(key,val){  //遍历得到每个json对象中的每个值
             console.log(key+'...' +val);
          });
        });
        //处理dom元素
        $.each($('input:hidden'),function(i,val){
           console.log(i+'...'+val);
           console.log(val.name+'...'+val.value);
        });
        </script>
    </body>
</html>

chunchun1230

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jquery之each方法

jQuery.each()函数用于遍历指定的对象和数组，并以对象的每个属性(或数组的每个成员)作为上下文来遍历执行指定的函数。所谓的上下文，意即该函数内部的this指针引用了该元素。该函数属于全局jQuery对象。请注意，这与jQuery对象(实例)的each()函数不同。语法静态函数jQuery.each()的语法如下：JavaScript:jQuery.each( o...
复制链接

扫一扫