each(callback)与each(object[, callback])区别

最新推荐文章于 2020-10-08 14:59:59 发布

QBjie

最新推荐文章于 2020-10-08 14:59:59 发布

阅读量169

点赞数

本文链接：https://blog.youkuaiyun.com/QBjie/article/details/107708322

版权

本文探讨了jQuery中的each方法两种用法，包括each(callback)针对jQuery对象的遍历，以及each(object[, callback])能遍历jQuery对象和数组。重点指出两者在调用对象和遍历对象类型上的差异，以及在回调函数中this的指向。" 80505391,7738466,PCB设计与布局实战指南,"['PCB', '电路设计', '电子工程', '硬件开发']

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.each(callback)：每个匹配的元素都会执行该函数，只能遍历jQuary对象。例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-3.3.1.min.js" ></script>
	</head>
	<body>
		<input type="checkbox" name="hobby" value="1" checked="checked"/>足球
		<input type="checkbox" name="hobby" value="2"/>篮球
		<input type="checkbox" name="hobby" value="3" checked="checked"/>乒乓球
	</body>
	<script>
		$("[name='hobby']").each(function(){
			console.log(this);
		})
	</script>
</html>

注意：参数实参所指函数中的this 指代的是 DOM 对象而非 jQuery 对象；如果在函数中使用jQuery对象，可以通过 $(this) 方式进行转换。

二.each(object[, callback])：用于遍历对象可以是jQuery对象也可以数组，其中object表示待遍历的jQuery对象或数组，例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-3.3.1.min.js" ></script>
	</head>
	<body>
		<input type="checkbox" name="hobby" value="1" checked="checked"/>足球
		<input type="checkbox" name="hobby" value="2"/>篮球
		<input type="checkbox" name="hobby" value="3" checked="checked"/>乒乓球
	</body>
	<script>
		$.each($("[name='hobby']"), function(i,value) {
			console.log(i+":"+value);
		});
		
		$.each(["tom","jimm","simy"], function(i,value) {
			console.log(i+":"+value);
		});
	</script>
</html>

区别：

1.调用对象不同：前者必须使用jQuery对象调用；后者只能使用$调用；

2.遍历对象不同：前者遍历的是jQuery对象；后者还可以遍历数组等非jQuery对象；