jQuery 祖先

  • jQuery 遍历 - 祖先

    使用jQuery,您可以遍历DOM树以查找元素的祖先。
    祖先是父母,祖父母,曾祖父母等等。
  • 遍历 DOM 树

    遍历DOM树的三个有用的jQuery方法是:
    遍历方法的最大类别是树遍历。
    • parent()
    • parents()
    • parentsUntil()
  • jQuery parent()方法

    parent()方法返回所选元素的直接父元素。
    此方法仅遍历DOM树的单个级别。
    以下示例返回每个<span>元素的直接父元素:
       
                <head>
                    <script type="text/javascript" src="jquery.js"></script>
                    <script type="text/javascript">
                        $(document).ready(function(){
                            $("span").parent();
                        });
                    </script>
                </head>
    
    尝试一下
  • jQuery parents()方法

    parents()方法返回所选元素的所有祖先元素,一直到文档的根元素(<html>)。
    以下示例返回所有<span>元素的所有祖先:
       
                    <head>
                        <script type="text/javascript" src="jquery.js"></script>
                        <script type="text/javascript">
                            $(document).ready(function(){
                                $("span").parents();
                            });
                        </script>
                    </head>
    
    尝试一下
    您还可以使用可选参数来过滤搜索祖先。
    以下示例返回<ul>元素的所有<span>元素的所有祖先:
       
                    <head>
                        <script type="text/javascript" src="jquery.js"></script>
                        <script type="text/javascript">
                          $(document).ready(function(){
                             $("span").parents("ul");
                          });
                        </script>
                    </head>
    
    尝试一下
  • jQuery parentsUntil()方法

    parentsUntil()方法返回两个给定参数之间的所有祖先元素。
    此方法仅遍历DOM树的单个级别。
    以下示例返回 <span>和<div>元素之间的所有祖先元素:
       
                <head>
                    <script type="text/javascript" src="jquery.js"></script>
                    <script type="text/javascript">
                        $(document).ready(function(){
                            $("span").parentsUntil("div");
                        });
                    </script>
                </head>
    
    尝试一下
    有关所有jQuery遍历方法的完整概述,请转到我们的jQuery遍历参考手册。