jQuery - 元素遍历

朴灿烈づ我的快乐病毒、 2023-06-15 09:56 5阅读 0赞

前言：

一提到“遍历”,大家一般都能联想到  each()  或者  for()等语法，但是在jQuery中究竟什么是遍历？

### 什么是遍历： ###

jQuery 遍历，意为**"移动"**，用于根据其相对于其他元素的关系来"查找"（或选取）HTML 元素。以某项选择开始，并沿着这个选择移动，直到抵达您期望的元素为止。

下图展示了一个家族树。通过 jQuery 遍历，**能够从被选（当前的）元素开始，轻松地在家族树中向上移动（祖先），向下移动（子孙），水平移动（同胞）。这种称为对DOM进行遍历**。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwNjMxMDYz_size_16_color_FFFFFF_t_70][]

JQuery的遍历方法最大的种类就是树的遍历

### jQuery遍历-- 祖先  ###

通过jQuery能够向上遍历DOM树，查找元素的祖先

**1.parent()**

parent()方法返回被选元素的直接父元素，该方法**只会向上一级**对DOM树进行遍历

例子： 返回每个<span>元素的直接父元素

$(document).ready(function(){
        $("span").parent();
    })

**2.parents()**

parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素(<html>)

例子： 返回所有<span> 元素的所有祖先

$(document).ready(function(){
        $("span").parents();
    })

也可以在parents()中 **通过 参数来过滤对祖先元素的搜索**

下面的例子：  返回所有的<span> 元素的所有祖先，并且他是<ul> 元素

$(document).ready(function(){
        $("span").parents("ul");
    })

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwNjMxMDYz_size_16_color_FFFFFF_t_70 1][]

**3.parentsUntil() **

方法返回介于两个给定元素之间的所有祖先元素

例子： 返回介于 <span> 和 <div>元素之间的所有祖先元素

$(document).ready(function(){
        $("span").parentsUntil("div");
    });

结果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwNjMxMDYz_size_16_color_FFFFFF_t_70 2][]

### jQuery遍历--后代： ###

后代是子 ，孙，曾孙 等

通过jQuery，我们可以向下遍历DOM树，以查找元素的后代

**1.children()**

方法返回被选元素的所有直接子元素，只会对最近的下一级Dom树进行遍历

例子：返回每个<div>元素的所有直接子元素：

$(document).ready(function(){
        $("div").children();
    
    })

也可以使用参数来过滤子元素

例子： 返回所有类名为"1" 的所有<p>元素，并且他们是<div>的直接子元素

$(document).ready(function(){
      $("div").children("p.1");
    });

**2.find() **

返回被选元素的后代元素，一路向下直到最后一代

例子： 返回属于<div> 后代的所有<span>标签

$(document).ready(function(){
        $("div").find("span");
    })

### jQuery遍历--兄弟 ###

兄弟之间拥有相同的父元素，通过jQuery能够在DOM树中遍历元素的同胞元素

在DOM树中水平遍历

**1.siblings() 方法 返回被选元素的所有同胞元素**

实例: 返回<h2>的所有兄弟元素

$(documen).ready(function(){
        $("h2").siblings();
    })

**1.1可以使用参数来过滤对兄弟元素的选择**

例子： 返回属于<h2>同胞元素的所有<p>元素

$(document).ready(function(){
        $("h2").siblings("p");
    });

**2. next()方法，**

该方法返回被选元素的下一个同胞元素，该方法只返回一个元素

例子： 下面的例子返回 <h2>的下一个兄弟元素

$(document).ready(function(){
        $("h2").next();
    })

**3.nextAll()方法**  返回被选元素的所有跟随的兄弟元素

例子： 返回<h2>的所有跟随的兄弟元素

$(document).ready(function(){
        $("h2").nextAll();
    })

**4.nextUntil()** 方法 返回介于两个给定参数之间的所有跟随的兄弟元素

例子：返回介于<h2>与<h6>元素之间的所有兄弟元素

$(document).ready(function(){
        $("h2").nextUntil("h6");
    })

**5.prev()** 方法返回前面的兄弟元素，和next()方法的使用一样

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwNjMxMDYz_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191121203831370.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwNjMxMDYz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwNjMxMDYz_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191121211628950.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwNjMxMDYz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwNjMxMDYz_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191121211837863.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwNjMxMDYz,size_16,color_FFFFFF,t_70