jQuery parents()和parent()

最新推荐文章于 2021-09-10 10:18:18 发布

梦忆长安

最新推荐文章于 2021-09-10 10:18:18 发布

阅读量503

点赞数

本文链接：https://blog.csdn.net/qq_44971038/article/details/103296059

版权

两种方法均用来获取父元素，不同的是，parent()是获取唯一父元素的元素集合；而parents()获取的是祖先元素的元素集合；

parent()

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-3.3.1.js"></script>
	</head>
	<body>
		<form>
			<input />
			<input type="button" />
			<input type="password" />
		</form>
		<script>
			var element=$("[type='button']").parent().get(0);
			console.log(element);			
		</script>
	</body>
</html>

首先建立form表单并创建三个input标签，然后使用parent()方法获取类型为“button”（type='button'）的父元素集，.get(0) 是将获取的对象转化成document对象；控制台输出对象，我们可以看到，就显示一个父元素form标签；

parents()

<script>
	$("[type='button']").parents().each(function(){
		console.log(this);
	});			
</script>

将parent()方法再换成parents()方法，得到以下结果；因为获取的是元素集合，不唯一，所以需要遍历输出到控制台；

我们可以看出，该方法将所有包含着匹配元素的祖先元素都获取到了；

小结：parent()方法是仅获取含匹配元素的父元素，而parents()方法则获取了所有包含匹配元素的祖先元素。

梦忆长安

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery parents()和parent()

两种方法均用来获取父元素，不同的是，parent()是获取唯一父元素的元素集合；而parents()获取的是祖先元素的元素集合；parent()<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script ...
复制链接

扫一扫