jQuery parentsUntil() 方法

实例

返回 <span> 和 <div> 之间的所有祖先元素:

  1. $(document).ready(function(){
  2. $("span").parentsUntil("div").css({"color": "red", "border": "2px solid red"});
  3. });

结果:

body (曾曾祖级)
div (曾祖级)
    ul (祖父级)
  • li (直接父级) span
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. .ancestors * {
  6. display: block;
  7. border: 2px solid lightgrey;
  8. color: lightgrey;
  9. padding: 5px;
  10. margin: 15px;
  11. }
  12. </style>
  13. <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
  14. <script>
  15. $(document).ready(function(){
  16. $("span").parentsUntil("div").css({"color": "red", "border": "2px solid red"});
  17. });
  18. </script>
  19. </head>
  20. <body class="ancestors"> body (曾曾祖级)
  21. <div style="width:500px;">div (曾祖级)
  22. <ul>ul (祖父级)
  23. <li>li (直接父级)
  24. <span>span</span>
  25. </li>
  26. </ul>
  27. </div>
  28. </body>
  29. <!-- 在本例中,我们选择 span 和 div 元素之间的所有祖先元素。 -->
  30. </html>

定义与用法

parentsUntil() 方法返回选择器停止选择器之间的所有祖先元素。

祖先元素是指父级、祖父级、曾祖父元素等等。

DOM 树: 该方法从父元素沿着 DOM 元素的祖先向上遍历,一直遍历到文档的根元素,直到到达特定元素。

注意: 如果两个参数都为空,则此方法将返回所有祖先元素(与 parents() 方法相同)。

相关方法:

  • parent() - 返回所选元素的直接父元素
  • parents() - 返回所选元素的所有祖先元素
  • closest() - 返回所选元素的第一个祖先元素

语法

  1. $(selector).parentsUntil(stop,filter)
参数描述
stop可选。选择器表达式、元素或 jQuery 对象,指示在何处停止搜索匹配的祖先元素
filter可选。指定选择器表达式以缩小在 selectorstop 之间搜索祖先的范围
注意: 要返回多个祖先元素,请用逗号分隔每个表达式

更多实例

如何使用这两个参数过滤搜索 span 和 div 之间的特定元素

如何在 span 和 body 之间返回多个祖先元素

使用 DOM 元素返回 span 和 div 之间的所有祖先

使用 DOM 元素缩小 span 之间 ul 元素的祖先搜索范围

分类导航