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遍历参考手册。