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

最新推荐文章于 2024-04-26 15:49:21 发布

吴声子夜歌

最新推荐文章于 2024-04-26 15:49:21 发布

阅读量1k

点赞数 4

分类专栏： jQuery 文章标签： jQuery 同袍遍历 siblings() next() nextUntil()

本文链接：https://blog.csdn.net/cold___play/article/details/101938941

版权

jQuery 专栏收录该内容

30 篇文章 2 订阅

订阅专栏

同袍遍历

所谓同袍节点，是指拥有相同父元素的节点。在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>

在这里插入图片描述

吴声子夜歌

关注

4
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery--遍历节点之同袍遍历（siblings()、next()、nextAll()、nextUntil()）详解

同袍遍历所谓同袍节点，是指拥有相同父元素的节点。在jQuery中提供了多种同袍节点遍历的方法，如siblings()、next()、nextAll()、prev()、prevAll()和preUntil()等方法1. siblings()方法：siblings()方法用于返回所匹配元素的同袍元素（但不包括匹配元素），并允许使用选择器进行筛选，其语法格式如下：$(selector).sibl...
复制链接

扫一扫

专栏目录