jQuery--遍历节点之同袍遍历（siblings()、next()、nextAll()、nextUntil()）详解

╰+攻爆jí腚メ 2021-08-13 15:30 377阅读 0赞

#### 同袍遍历 ####

所谓同袍节点，是指拥有相同父元素的节点。在jQuery中提供了多种同袍节点遍历的方法，如siblings()、next()、nextAll()、prev()、prevAll()和preUntil()等方法

**1. siblings()方法：**  
siblings()方法用于返回所匹配元素的同袍元素（但不包括匹配元素），并允许使用选择器进行筛选，其语法格式如下：

$(selector).siblings([childSelector])

*  $(selector)：表示所匹配的元素
 *  childSelector（可选）：表示指定的选择器
 *  当siblings()方法提供childSelector参数时，将返回所匹配元素的同袍元素，并使用childSelector选择器进行筛选，否则返回匹配元素的所有同袍元素

**2. next()方法：**  
next()方法用于返回所匹配元素的紧邻的同袍元素，并允许使用选择器进行筛选，其语法格式如下：

$(selector).next([childSelector])

*  $(selector)：表示所匹配的元素
 *  childSelector（可选）：表示指定的选择器
 *  当next()方法提供childSelector参数时，将返回所匹配元素的紧邻的同袍元素，并使用childSelector选择器进行筛选，否则返回匹配元素的所有紧邻的同袍元素

**3. nextAll()方法：**  
nextAll()方法用于返回所匹配元素的所有紧随的同袍元素，并允许使用选择器进行筛选，其语法格式如下：

$(selector).nextAll([childSelector])

*  $(selector)：表示所匹配的元素
 *  childSelector（可选）：表示指定的选择器
 *  当nextAll()方法提供childSelector参数时，将返回所匹配元素的紧邻的同袍元素，并使用childSelector选择器进行筛选，否则返回匹配元素的所有紧邻的同袍元素

**4. nextUntil()方法：**  
nextUnitl()方法用于返回两个给定元素之间的所有同袍元素，其语法格式如下：

$(selector).nextUntil([expression | element])

*  $(selector)：表示所匹配的元素
 *  参数类型是表达式或DOM对象，表示将返回从$(selector)到表达式选择器（或DOM对象）之间的所有的同袍元素
 *  当nextUnitl()方法没有提供参数时，将返回匹配元素的所有同袍元素。

示例：

<!doctype html>
    <html>
      <head>
    	<meta charset="utf-8">
    	<title>同胞元素-jQuery遍历</title>
    	<script type="text/javascript" src="js/jquery-1.x.js"> </script>
      </head>
      <body>
        <div>div(父节点)
          <h1>在 DOM 树中水平遍历</h1>
          <p>有许多有用的方法让我们在 DOM 树进行水平遍历</p>
          <span>匹配元素中所有的span同胞元素</span>
          <h2>jQuery 遍历-同胞</h2>
          <p>$("h2").siblings("p");</p>
          <h3>同胞拥有相同的父元素。</h3>
          <p>通过jQuery，您能够在 DOM 树中遍历元素的同胞元素</p>
        </div>
        <div>div(父节点)
          <h2>jQuery next()方法</h2>
          <p>$("h2").next();</p>
          <span>next()方法返回被选元素的下一个同胞元素</span>
          <p>该方法只返回一个元素</p>
          <h3>亲自试一试</h3>
        </div>
    	<script type="text/javascript"> $(function (e) { //匹配元素的所有的同胞元素（不包括同胞元素） $("h2").siblings().css({ "border":"1px solid red"}); //匹配元素中所有的span同胞元素 $("h2").siblings("span").css({ "font-size":"18pt"}); //匹配元素紧邻的同胞元素 $("h2").next().css({ "color":"blue"}); //匹配元素紧邻的同胞元素，且该元素是p元素（进一步筛选） $("h2").next("p").css({ "font-size":"20pt"}); //匹配元素之后的所有紧随的同胞元素 $("h2").nextAll().css({ "color":"red"}); //匹配元素之后的紧随的同胞元素，且是h3元素（进一步筛选） $("h2").nextAll("h3").css({ "color":"yellow"}); //从h2到h3之间的所有同胞元素 $("h2").nextUntil("h3").css({ "color":"gray"}); }); </script>
      </body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbGRfX19wbGF5_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbGRfX19wbGF5_size_16_color_FFFFFF_t_70]: /images/20210813/a6aa83132d1a4dc7a4634f341b5bb858.png