一、遍历大体分三种情况：  遍历祖先、后代、同辈

   1）、遍历祖先用到的方法：

parent()：返回距离指定元素最近的也是直接的父级元素。即父元素

parents()：返回指定元素的所有父级元素。即父元素、祖父元素、曾祖父元素

parents(” 元素名 “)：返回指定元素的父级元素中指定的父级元素

parentsUntil()：返回介于给定两个元素之间的所有父级元素。即返回的父级元素中有很多个，但是只返回其中一部分而不是全部。

 

2）、遍历后代用到的方法：

children()：返回指定元素的所有子集元素，即靠近指定元素最近的子集元素，而不是所有子集元素

find(" 元素名 ")：返回指定元素指定的后代元素。

find(" * ")：返回指定元素的所有后代元素。 切忌没有 findAll()

 

3）、遍历同辈用到的方法：

siblings()：返回指定元素的所有同辈元素

siblings(" 元素名 ")：返回指定元素的同辈元素中指定的元素。

next()：返回指定元素的同辈元素中的后面一个（紧跟着的）。返回值只有一个

nextAll()：返回指定元素的同辈元素中所有同辈元素。

nextUntil()：返回指定的两个同辈元素中间的所有同辈元素。

prev()：回指定元素的紧挨着的前面一个同辈元素

prevAll()：返回指定元素的所有前面的同辈元素

prevUntil()：返回指定元素的同辈元素的前面的所有元素。

 

二、html源码部分

 

<body class="ancestors">body (曾曾祖父元素)
<div style="width:500px;">div (曾祖父元素)
    <ul>ul (祖父元素)
        <li class="demo">li (父元素)
            <span>span</span>
            <b>b b</b>
            <i>i</i>
            <p>pp</p>
            <div class="box">div</div>
        </li>
    </ul>
</div>
<div style="width:500px;">div (曾祖父元素)
    <ul>ul (祖父元素)
        <li>li (父元素)
            <span>span</span>
        </li>
    </ul>
</div>
</body>
</body>

 

三、js部分：

1、遍历祖先：

<script>
        //        遍历祖先
                $(document).ready(function(){
        //      parent是指距离最近的即直接的父级元素；parents是指所有的父级包括祖父，曾祖父，曾曾祖父
                    $("span").parents().css({"color":"red","border":"1px solid red"});

        //          返回span的所有祖先，且是ul
                    $("span").parents("ul").css({"color":"blue","border":"1px solid blue"})

        //            返回介于给定的两个元素之间的所有父级元素
                    $("span").parentsUntil("div").css({"color":"green","border":"1px solid green"});

                });

              </script>

2、遍历后代：

<script>
    //遍历后代
            $(document).ready(function(){
    //            children() 方法返回被选元素的所有直接子元素。即靠近div最近的元素不是所有子元素
                $("div").children().css({"color":"red"});

    //            返回类名为 "demo" 的所有 <li> 元素，并且它们是 <ul> 的直接子元素：
                $("ul").children("li.demo").css({"color":"green"});

    //            find() 方法返回指定元素的指定的后代元素
                $("div").find("span").css({"color":"blue"});

    //            find(“*”) 方法返回所有的后代元素
                $("div").find("*").css({"color":"yellow"});
            });
</script>

 

3、遍历同辈：

 

<script>
        //遍历同胞
        $(document).ready(function () {
            //siblings()方法 ：返回指定元素的所有同辈元素
            $("i").siblings().css({"color": "red"});

//            返回属于 <i> 的同胞元素中所有 <span> 元素：
            $("i").siblings("span").css({"color": "blue"});

//            next() 方法:返回指定元素的同辈元素中的后面一个（紧跟着的）。
            $("i").next().css({"color": "#f0f"});

//            nextAll() 方法返回指定元素的所有跟随的同辈元素。
               $("span").nextAll().css({"color": "#f00f"});


//            nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。
            $("span").nextUntil("p").css({"color": "#00c6ff"});

//            prev()方法返回指定元素的紧挨着的前面一个同辈元素
            $("p").prev().css({"color":"green"});

//            prevAll()方法返回指定元素的所有前面的同辈元素
            $("div").prevAll().css({"color":"blue"});

//            prevUntil()方法:返回指定元素的同辈元素的前面的所有元素
            $(".box").prevUntil().css({"color":"yellow"});
        });
    </script>