JQuery中常用的一些遍历方式

最新推荐文章于 2022-04-30 12:31:24 发布

qingo00o

最新推荐文章于 2022-04-30 12:31:24 发布

阅读量449

点赞数

分类专栏： JS学习文章标签： JQuery遍历 jquery

本文链接：https://blog.csdn.net/qingo00o/article/details/79629327

版权

JS学习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1、$(selecter).each与$.each方法

$.each(demoArr|demoObj, function(e, ele))

$(selecter).each可以看作专门用来遍历DOMList的，如多个li标签，或者多个div标签，$.each可以用来遍历数组和对象，其中e表示索引值或者key值，ele表示value值

<body>
        <div>test1</div>
        <div>test2</div>
        <div>test3</div>
        <div>test4</div>
        <div>test5</div>
    </body>

下面要遍历上面的几个DIV

            var $div=$("div");
            //each方法遍历
            $("div").each(function(i,e){
                console.log(i);//i是索引
                console.log(this);//这里的是DOM对象，this也可以换成参数e
            });
            //也可以使用下面的方法
            $.each($div,function(i,e){
                console.log(i+" : "+e);
            });

下面重点说一下遍历集合与数组：
首先我们可以使用$.each()方法进行遍历，如下：

var a=['a','b','c'];
$.each(a,function(e,ele){
    console.log("a[e]:"+a[e]);//a,b,c
    console.log("ele:"+ele);//a,b,c
});

我们在遍历数组和集合的时候，Array可以使用下标，Map和Set不能使用下标，ES6引入了iterable类型，Array,Map,Set都属于iterable类型，它们可以使用for…of循环来遍历：
for…of与for…in的区别：for … in循环由于历史遗留问题，它遍历的实际上是对象的属性名称。一个Array数组实际上也是一个对象，它的每个元素的索引被视为一个属性。当我们手动给Array对象添加了额外的属性后，输出的时候会一起被输出。
即for(var item in arr|obj){} 可以用于遍历数组和对象，其实在js中数组也被定义为对象，在JS中，除了原生值其他都可以被称为对象。我的理解数组只不过它的属性是连续递增的数字。

遍历数组时，item表示索引值， arr表示当前索引值对应的元素 arr[item]
遍历对象时，item表示key值，arr表示key值对应的value值 obj[item]
使用for…in 遍历一个数组：

            var a=['a','b','c'];
            a.name='v';
            for(var x in a){
                console.log(x);
            }

控制台输出如下：
这里写图片描述
使用for…in遍历一个对象

var m = {};
m[1]='x';
m['name']='duJian';
m['age']=23;
for(var i in m){
    console.log(i+":"+m[i]);//1:x,name:duJian,age:23
}

使用for…of 遍历一个数组：

            for(var x of a){
                console.log(x);//输出a,b,c
            }

更好的方式：iterable内置的forEach方法：

            //遍历一个数组：
            var a=['a','b','c'];
            a.forEach(function(element,index,array){
                // element: 指向当前元素的值  
                // index: 指向当前索引  
                // array: 指向Array对象本身 
                console.log(index+":"+element);//0:a,1:b,2:c
                console.log("array:"+array);//a,b,c
            });

            //遍历一个set集合
            var s = new Set(['A', 'B', 'C']);
            s.forEach(function (element, sameElement, set) {  
                console.log("参数1="+element+",参数2="+sameElement);  
            });
            //参数1=A,参数2=A  
            //参数1=B,参数2=B  
            //参数1=C,参数2=C

//遍历一个map
var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);  
m.forEach(function (value, key, map) {  
    console.log("参数1="+value+",参数2="+key);  
});  
//参数1=x,参数2=1  
//参数1=y,参数2=2  
//参数1=z,参数2=3

本文主要参考：壁立千仞无欲则刚博主的网站：http://blog.csdn.net/wzj0808/article/details/51392060
学习中，如文章有错误，欢迎批评指正！

qingo00o

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery中常用的一些遍历方式

1、$(selecter).each与$.each方法$.each(demoArr|demoObj, function(e, ele))$(selecter).each可以看作专门用来遍历DOMList的，如多个li标签，或者多个div标签，$.each可以用来遍历数组和对象，其中e表示索引值或者key值，ele表示value值&lt;body&gt; &lt...
复制链接

扫一扫