Jquery 遍历父代
1. 遍历¶
所谓遍历(Traversal),是指沿着某条搜索路线,依次对树中每个结点均做一次且仅做一次访问。访问结点所做的操作依赖于具体的应用问题。 遍历是二叉树上最重要的运算之一,是二叉树上进行其它运算之基础。当然遍历的概念也适合于多元素集合的情况,如数组。
jQuery 遍历,意为"移动",用于根据其相对于其他元素的关系来"查找"(或选取)HTML 元素。以某项选择开始,并沿着这个选择移动,直到抵达您期望的元素为止。下图展示了一个家族树。通过 jQuery 遍历,您能够从被选(当前的)元素开始,轻松地在家族树中向上移动(祖先),向下移动(子孙),水平移动(同胞)。这种移动被称为对 DOM 进行遍历。
<div> | <ul> | ------------------- | | <li> <li> | | --------- | | | | <span> <span> <b>
<div>
元素是<ul>
的父元素,同时是其中所有内容的祖先。<ul>
元素是<li>
元素的父元素,同时是<div>
的子元素- 左边的
<li>
元素是<span>
的父元素,<ul>
的子元素,同时是<div>
的后代。 <span>
元素是<li>
的子元素,同时是<ul>
和<div>
的后代。- 两个
<li>
元素是同胞(拥有相同的父元素)。 - 右边的
<li>
元素是<b>
的父元素,<ul>
的子元素,同时是<div>
的后代。 <b>
元素是右边的<li>
的子元素,同时是<ul>
和<div>
的后代。
如图家谱一样,祖先是父、祖父、曾祖父等等。后代是子、孙、曾孙等等。同胞拥有相同的父。
2. 祖先¶
祖先是父、祖父或曾祖父等等。通过 jQuery,您能够向上遍历 DOM 树,以查找元素的祖先。
向上遍历 DOM 树
- parent() 方法返回被选元素的直接父元素
- parents() 方法返回被选元素的所有祖先元素,它一路向上直到文档的根元素
(<html>)
。 - parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。
2.1 parent¶
parent()
方法返回被选元素的直接父元素。该方法只会向上一级对 DOM 树进行遍历。
下面的例子返回每个 <span>
元素的的直接父元素
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>caimengzhi blog jquery</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> <style type="text/css"> #div1 * { border: 2px solid lightgrey; color: lightgrey; padding: 5px; margin: 15px; } </style> </head> <body> <div id="div1"> <div id="div2">div (曾祖父元素)--老太 <div> div(祖父元素)--爷爷 <div>div(父元素)-爸爸 <p style="color: blue;text-align: center">我是谁</p> </div> </div> </div> </div> </body> <script> $(function () { $('p').parent().css({"color":"red","border":"2px solid red"}); }) </script> </html>
2.2 parents¶
parents() 方法返回被选元素的所有祖先元素,它一路向上直到文档的根元素 ()。
下面的例子返回所有 元素的所有祖先
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>caimengzhi blog jquery</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<style type="text/css">
#div1 * {
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2">div (曾祖父元素)--老太
<div> div(祖父元素)--爷爷
<div>div(父元素)-爸爸
<p style="color: blue;text-align: center">我是谁</p>
</div>
</div>
</div>
</div>
</body>
<script>
$(function () {
$('p').parents().css({"color":"blue","border":"2px solid red"});
})
</script>
</html>
您也可以使用可选参数来过滤对祖先元素的搜索。下面的例子返回所有 <span>
元素的所有祖先,并且它是 <ul>
元素
$(function () { $("span").parents("ul"); })
2.3 parentsUntil¶
parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。下面的例子返回介于 与 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>caimengzhi blog jquery</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<style type="text/css">
#div1 * {
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2">div (曾祖父元素)--老太
<ul> ul(祖父元素)--爷爷
<li>li(父元素)-爸爸
<p style="color: blue;text-align: center">我是谁</p>
</li>
</ul>
</div>
</div>
</body>
<script>
$(function () {
$('p').parentsUntil('ul').css({"color":"blue","border":"2px solid red"});
})
</script>
</html>