小白教程
所有教程
关于
Search
172.70.127.9
172.70.127.9
参数设置
贡献
退出
操作
编辑
移动
保护
信息
历史
删除
查看“JQuery 遍历 – 祖先”的源代码
本页内容
上一节:
JQuery_遍历
下一节:
JQuery_遍历_–_后代
因为以下原因,您没有权限编辑本页:
您请求的操作仅限属于该用户组的用户执行:
用户
您可以查看和复制此页面的源代码。
{{DISPLAYTITLE:jQuery parent}}[[Category:jQuery 教程|22]] = jQuery 遍历 - 祖先 = 祖先是父、祖父或曾祖父等等。 通过 jQuery,您能够向上遍历 DOM 树,以查找元素的祖先。 == 向上遍历 DOM 树 == 这些 jQuery 方法很有用,它们用于向上遍历 DOM 树: * parent() * parents() * parentsUntil() == jQuery parent() 方法 == parent() 方法返回被选元素的直接父元素。 该方法只会向上一级对 DOM 树进行遍历。 下面的例子返回每个 <span> 元素的直接父元素: <sample title="" desc="" lang="html" hererun="1"> $(document).ready(function(){ $("span").parent(); }); </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .ancestors * { display: block; border: 2px solid lightgrey; color: lightgrey; padding: 5px; margin: 15px; } </style> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("span").parent().css({"color":"red","border":"2px solid red"}); }); </script> </head> <body> <div class="ancestors"> <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> </run> == jQuery parents() 方法 == parents() 方法返回被选元素的所有祖先元素,它一路向上直到文档的根元素 (<html>)。 下面的例子返回所有 <span> 元素的所有祖先: <sample title="" desc="" lang="html" hererun="1"> $(document).ready(function(){ $("span").parents(); }); </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .ancestors * { display: block; border: 2px solid lightgrey; color: lightgrey; padding: 5px; margin: 15px; } </style> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("span").parents().css({"color":"red","border":"2px solid red"}); }); </script> </head> <body class="ancestors">body (曾曾祖父元素) <div style="width:500px;">div (曾祖父元素) <ul>ul (祖父元素) <li>li (父元素) <span>span</span> </li> </ul> </div> </body> </html> </run> 您也可以使用可选参数来过滤对祖先元素的搜索。 下面的例子返回所有 <span> 元素的所有祖先,并且它是 <ul> 元素: <sample title="" desc="" lang="html" hererun="1"> $(document).ready(function(){ $("span").parents("ul"); }); </sample> <run name=""> <!DOCTYPE html> <html> <head> <style> .ancestors * { display: block; border: 2px solid lightgrey; color: lightgrey; padding: 5px; margin: 15px; } </style> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("span").parents("ul").css({"color":"red","border":"2px solid red"}); }); </script> </head> <body class="ancestors">body (great-great-grandparent) <div style="width:500px;">div (great-grandparent) <ul>ul (grandparent) <li>li (direct parent) <span>span</span> </li> </ul> </div> </body> </html> </run> == jQuery parentsUntil() 方法 == parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。 下面的例子返回介于 <span> 与 <div> 元素之间的所有祖先元素: <sample title="" desc="" lang="html" hererun="1"> $(document).ready(function(){ $("span").parentsUntil("div"); }); </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .ancestors * { display: block; border: 2px solid lightgrey; color: lightgrey; padding: 5px; margin: 15px; } </style> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("span").parentsUntil("div").css({"color":"red","border":"2px solid red"}); }); </script> </head> <body class="ancestors"> body (曾曾祖父元素) <div style="width:500px;">div (曾祖父元素) <ul>ul (祖父元素) <li>li (父元素) <span>span</span> </li> </ul> </div> </body> </html> </run>
返回至“
JQuery 遍历 – 祖先
”。
上一节:
JQuery_遍历
下一节:
JQuery_遍历_–_后代