jQuery树遍历

我们知道在HTML结构中元素的嵌套形成了树形结构，在查找节点的时候当然也可以用树形查找的方法，jQuery提供了树形遍历的方法。更加方便的进行遍历节点

目录

children()

closest()

find()

next()

nextAll()

nextUnitl()

parent()

parents()

offsetParent()

parentsUntil()

prev()

prevAll()

prevUntil()

siblings()

---

children()

描述：获取匹配集合中每个元素的直接子元素，可以用选择器选择性过滤

不写参数表示遍历所有子元素，写参数（参数可以是选择器）表示选择选择器相匹配的子元素

<div>
    <p></p>
    <span></span>
</div>
<script>
    $(function(){
        $("div").children() //p span
        $("div").children("p")    //p
    })
</script>

closest()

描述：从元素本身开始，在Dom树上逐渐向上级元素匹配，并返回最先匹配的祖先元素

这个有几个注意的地方：第一个是从元素本身开始，也就是说在匹配的过程中本身也在匹配的范围内;第二个是必须写一个参数（选择器），作为匹配的条件，返回最先匹配到的祖先元素元素

<div>
    <p></p>
</div>
<script>
    $(function(){
        $("p").closest("div")    //div
        $("p").closest("p")     //p
    })
</script>

find()

描述：通过一个选择器，jQuery、或者元素过滤，得到当前匹配集合中每个元素的指定后代

顾名思义就是查找节点的意思

<div>
    <p></p>
    <span></span>
</div>
<script>
    $(function(){
        $("div").find("span")    //span
    })
</script>

next()

描述：取得匹配集合中的每个元素紧邻的后面同辈元素的集合

如果参数提供的是选择器，那么只有当紧邻元素满足选择器的时候才会返回，注意是紧邻。

<div></div>
<span></span>
<p class="box"></p>
<script>
    $(function(){
        $("div").next();    //span
        $("div").next("span")    //span
        $("div").next("p")    //不满足
        $("div").next(".box")    //不满足
    })
</script>

nextAll()

描述：获取匹配元素集合中所有后面的同辈元素，也可以用选择器选择性筛选。

这个和上面next()方法不同的是：next()是获取后面紧邻的同辈元素，nextAll()是获取后面所有的同辈元素

<div></div>
<span><span>
<p></p>
<script>
    $(function(){
        $("div").nextAll();    //span p
        $("div").nextAll("p")    //p
    })
</script>

nextUnitl()

描述：通过选择器，Dom节点或jQuery对象得到每个元素之后的兄弟元素，但不包括匹配的元素

可以写参数参数有两种情况

       第一种：写一个参数，表示为匹配选择元素的兄弟元素直到匹配到参数为止，也就是说匹配目标元素和匹配元素中间段元素。

      第二种：写两个参数，第一个参数和上面一样，第二个参数（选择器）表示匹配到的是什么元素。

<div></div>
<span></span>
<p><p>
<div></div>
<script>
    $(function(){
        $("div").nextUntil("p")    //span
        $("div").nextUntil("div","p")    //p
    })
</script>

parent()

描述：获得匹配集合中每个元素的父元素，可以提供一个选择器

<div>
    <p></p>
</div>
<script>
    $(function(){
        $("p").parent();    //div
        $("p").parent("div");    //div
    })
</script>

parents()

描述：获得匹配集合中每个元素的祖先元素，可以提供一个选择器

<div>
    <ul>
        <li></li>
    </ul>
</div>
<script>
    $(function(){
        $("li").parents()    //ul div
        $("li").parents("div")    //div
    })
</script>

offsetParent()

描述：获得离指定元素最近的含有定为属性的祖先元素

<div style="position:absolute;">
    <p></p>
</div>
<script>
    $(function(){
        $("p").offsetParent()    //div
    })
</script>

parentsUntil()

描述：查找匹配元素的所有前辈元素，直到遇到选择器、Dom节点、jQuery对象匹配元素的位置结束，但不包括这些元素。

参数有两种情况

     第一种：一个参数，表是匹配到参数位置结束。

    第二种：两个参数，第一个参数和上面一样，第二个参数表示匹配什么元素。

<div></div>
<div class="box"></div>
<div>
    <ul>
           <li><li>
    <ul>
</div>
<script>
    $(function(){
        $("li").parentUntil(".box")    
        $("li").parentUntil(".box","div")
    })
</script>

prev()

描述：获取匹配元素集合中每个元素相邻的前一个元素的集合，也可以使用选择器选择性筛选

<div></div>
<p></p>
<span></span>
<script>
    $(function(){
        $("p").prev()    //div
        $("p").prev("div")    //div
    })
</script>

prevAll()

描述：获取匹配元素集合中所有前面的元素，选择器选择性筛选

<div></div>
<p></p>
<span></span>
<script>
    $(function(){
        $("span").prevAll();    //div p
        $("span").prevAll("div")    //div
    })  
</script>

prevUntil()

描述：获得每个元素但不包括选择器，Dom阶段，或者jQuery对象匹配的元素的所有前面的兄弟元素

参数有两种请况

    第一种：一个参数，表是匹配到参数位置结束。

   第二种：两个参数，第一个参数和上面一样，第二个参数表示匹配什么元素。

​<div></div>
<p></p>
<span></span>
<script>
    $(function(){
        $("span").prevUntil("div");    
        $("span").prevUntil("div","p")    
    })  
</script>

​

siblings()

描述：获取匹配元素集合中每个元素的兄弟元素，可以提供一个可选的选择器

​<div></div>
<p></p>
<span></span>
<script>
    $(function(){
        $("p").siblings()    //div span
        $("p").sibling("div")    //div
    })  
</script>

​

​

主页传送门