019-jQuery遍历-祖先

最新推荐文章于 2024-04-26 16:47:03 发布

天又热了

最新推荐文章于 2024-04-26 16:47:03 发布

阅读量79

点赞数

分类专栏： jQuery 文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/weixin_43404791/article/details/122695906

版权

jQuery 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
		<style>
			.ancestors *{
				display: block;
				border: 5px solid lightgray;
				color: lightgray;
				padding: 15px;
				margin: 35px;
			}
		</style>
		<script>
			$(document).ready(function(){
				$("span").parent().css({
					"color":"red",
					"border":"2px solid red"
				});
				$("span").parents().css({
					"color":"red",
					"border":"2px solid red"
				});
				$("span").parents("ul").css({
					"color":"red",
					"border":"2px solid blue"
				});
				$("span").parentsUntil("div").css({
					"color":"red",
					"border":"2px solid yellow"
				});
			});
		</script>
	</head>
	<!--
	jQuery遍历-祖先
		祖先是父,祖父或曾祖父等.
		通过jQuery,您能够向上遍历DOM树,以查找元素的祖先
	向上遍历DOM树
		这些jQuery方法很有用,他们用于向上遍历DOM树:
		-父母()
		-父母()
		-父母直到()
	jQuery parent()方法
		parent()方法返回被选元素的直接父元素
		该方法只会向上一级对DOM树进行遍历
		下面的例子返回每个<span>元素的直接父元素
		$("span").parent().css({
			"color":"red",
			"border":"2px solid red"
		});
	jQuery parents()方法
		parents()方法返回被选元素的所有祖先元素,它一路向上直到文档的根元素<html>
		下面例子返回所有span元素的所有祖先.
		$("span").parents().css({
			"color":"red",
			"border":"20px solid red"
		});
		您也可以选择使用可选参数来过滤对祖先元素的搜索
		下面的例子返回所有<span>元素的所有祖先,并且他是<ul>元素
		实例
		$("span").parents("ul").css({
			"color":"red",
			"border":"2px solid blue"
		});
		jQuery parentsUntil()方法
		parentsUntil()方法返回介于两个给定元素之间的所有祖先元素.
		下面的例子返回介于<span>与<div>元素之间的所有祖先元素
		$("span").parentsUntil("div").css({
			"color":"red",
			"border":"2px solid yellow"
		});
	-->
	<body>
		<div class="ancestors">
			body (曾曾祖父元素)
			<div style="width:500px;">
				div (曾祖父元素)
				<ul>
					ul (祖父元素)
					<li>
						li (父元素)
						<span>span</span>
					</li>
				</ul>
			</div>
			<div style="width:500px;">
				div (祖父元素)
				<p>
					p (父元素)
					<span>
						span
					</span>
				</p>
			</div>
			
		</div>
	</body>
</html>

天又热了

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
019-jQuery遍历-祖先

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> <style> .ancestors *{ display: block;
复制链接

扫一扫