jQuery中的each方法实例

小咪咪 2022-08-13 11:49 155阅读 0赞

$.each()和$(selector).each()很相似，但是是不一样的。

前者可用于遍历一个数组或是json对象

而后者是专门用来遍历一个jQuery对象

先来说说$.each()吧，一般是这么用的

$.each(arr, function(i, v){
    	// do something
    })

其中arr也就是集合，也可以是json对象

而回调函数中的i则是数组的下标（在json中则是对应的key）

而v则是arr\[i\]的值（在json中则是对应的value）

下面来看一个简单的实例：

var json = {name:"zhu", age:10}
    var arr = ['a','b','c','d']
    
    $.each(arr, function(i, v){
    	alert(i + ":" + v)
    });
    $.each(json, function(k, v){
    	alert(k + ":" + v)
    });

这样就完成了对数组和json的遍历。

当然了，如此遍历用原生的js也是可以轻松做到的

比如遍历上面的json或是arr，只需要：

for(var k in json){
    	alert(k + ":" + arr[k])
    }

看起来似乎还是js更简洁一些吧~性能上可能也要好一点

下面介绍$(selector).each()，这个方法在js中就不好找到替代品了。

其中$(selector)负责选中一组jQuery元素，而each函数负责遍历它

比如我们想对一组“li”改变其文字颜色

<style>
    .red{
    	color: red;
    }
    </style>
    <ul>
    	<li>Dog</li>
    	<li>Cat</li>
    	<li>Mouse</li>
    </ul>
    <input type="button" id="btn">
    <script>
    	$("#btn").click(function() {
    		$("li").each(function() {
    			$(this).toggleClass('red');
    		});
    	});
    </script>

不过实际上，jQuery中存在隐式迭代的现象

每当我们调用选择器方法查找dom树里的元素时，其实就是把找到的dom元素存入一个jQuery对象里的dom数组中，然后再把这个jQuery对象返回。

而所谓隐式迭代也就是当我们调用jQuery方法时（如 toggleClass(..)），jQuery方法会遍历内部 dom数组，并调用每个dom元素的对应的dom属性或方法完成操作。

所有click中的函数并不需要使用each，直接$("li").toggleClass('red')也可以

在$(seletor).each(..)中，this被绑定到了当前遍历的DOM对象，如需获得jQuery对象$(this)就可以了

值得注意的是，还可以在遍历过程中提前退出遍历，只需要return false就可以了

发表评论取消回复

表情：

评论列表（有 0 条评论，155人围观）

还没有评论，来说两句吧...

相关阅读

相关 jQuery 遍历 - each() 方法

jQuery 遍历 - each() 方法 var totalMoney = $("money").val(); //获取 id="money"元素的value值

曾经终败给现在/ 2024年02月18日 17:19/ 0 赞/ 9 阅读

相关 jQuery中的each方法实例

$.each()和$(selector).each()很相似，但是是不一样的。前者可用于遍历一个数组或是json对象而后者是专门用来遍历一个jQuery对象先来说说

小咪咪/ 2022年08月13日 11:49/ 0 赞/ 156 阅读

相关 jQuery 中的 each()

通过它，你可以遍历对象、数组的属性值并进行处理。使用说明 each函数根据参数的类型实现的效果不完全一致： 1、遍历对象(有附加参数) $.each(Object,

旧城等待，/ 2022年08月05日 12:25/ 0 赞/ 164 阅读

相关 jQuery中$.each()和json实例

![效果图][SouthEast] <!DOCTYPE html> <html> <head> <meta http-

梦里梦外;/ 2022年06月15日 00:46/ 0 赞/ 131 阅读

相关 jQuery.each

each()方法能使DOM循环结构简洁，不容易出错。each()函数封装了十分强大的遍历功能，使用也很方便，它可以遍历一维数组、多维数组、DOM, JSON 等等在jav

不念不忘少年蓝@/ 2021年12月03日 06:23/ 0 赞/ 287 阅读

相关 jquery的$().each,$.each的区别

在jquery中，遍历对象和数组，经常会用到$().each和$.each()，两个方法。两个方法是有区别的，从而这两个方法在针对不同的操作上，显示了各自的特点。 $().e

灰太狼/ 2021年11月14日 14:08/ 0 赞/ 384 阅读

相关 jquery的$().each,$.each的区别

最近一直在研究JS，今天看到遍历模块的时候，看到了这个函数： $(selector).each(function(index,element)) 但是想想，这个函数和之前项

以你之姓@/ 2021年09月14日 09:46/ 0 赞/ 383 阅读

相关 jQuery each() 方法

概述： jQuery中的 each 函数很方便,`$.each ()`函数封装了十分强大的遍历功能，它可以遍历一维数组、多维数组、DOM ，JSON 等等。 `$.ea

￡神魔★判官ぃ/ 2021年09月13日 23:22/ 0 赞/ 439 阅读

相关 JQuery中的each()方法和$.each()函数的使用

1、each()方法的使用 JQuery提供了 each() 方法用于遍历匹配的元素信息。以每一个匹配的元素作为上下文来执行一个函数。每次执行传递进来的函数时，函数中的

Myth丶恋晨/ 2021年08月31日 14:29/ 0 赞/ 409 阅读

相关 jQuery each中的break

jquery的each方法时，在callback函数中使用了break，想跳出循环，谁知没用。最后查了下使用文档，原来要在callback函数中返回false就可以调出循环了，

Love The Way You Lie/ 2021年06月24日 14:00/ 0 赞/ 507 阅读