jQuery prev~siblings层次选择器的用法（附带实例）

所谓层次选择器，就是将页面中 DOM 元素之间的父子关系作为匹配条件的选择器。

jQuery 提供了多种层次选择器，包括 ancestor descendant选择器、parent > child 选择器、prev+next 选择器和 prev~siblings 选择器。

prev~siblings 选择器用于匹配 prev 元素之后的所有 siblings 元素。其中，prev 和 siblings 是两个同辈元素。

prev~siblings 选择器的使用方法如下：

$("prev ~ siblings");

prev 选择器的第一部分，可以是任何有效的元素；
siblings 选择器的第二部分，用以匹配 prev 元素之后的所有 siblings 元素。

例如，要匹配 <div> 元素的同辈元素 <ul>，可以使用下面的 jQuery 代码：

$("div ~ ul");

【实例】匹配页面中 <div> 元素的同辈元素，并为匹配元素添加背景颜色为淡蓝色。
1) 创建一个名为 index.html 的文件，在该文件的 <head> 标记中使用下面的语句引入 jQuery 库。

<script type="text/javascript" src="../js/jquery-3.6.4.min.js"></script>

2) 在页面的 <body> 标记中，首先添加一个 <div> 标记，并在该 <div> 标记中添加两个 <p> 标记；然后在 <div> 标记的下方再添加一个 <p> 标记。关键代码如下：

<div>
    <p>第一个<p></p>
    <p>第二个<p></p>
</div>
<p>div外面的<p></p>

3) 编写 CSS 样式，用于设置 <body> 元素的字号大小，并且添加一个用于设置背景颜色的 CSS 类。具体代码如下：

<style type="text/css">
    .background{background:#cef}
    body{font-size:12px;}
</style>

4) 在引入 jQuery 库的代码下方编写 jQuery 代码，实现匹配 <div> 元素的同辈元素 <p>，并为其添加 CSS 类。具体代码如下：

<script type="text/javascript" charset="GBK">
    $(document).ready(function() {
        $("div~p").addClass("background");  //为匹配的元素添加css类
    });
</script>

运行本实例，将显示下图所示的效果：

图 1 为<div>元素的同辈元素添加背景颜色

从图中可以看到“<div>外面的<p>”的段落被添加了背景颜色，而“第一个<p>”和“第二个<p>”的段落由于 <p> 元素不是 <div> 元素的同辈元素，所以没有被添加背景颜色。

jQuery prev~siblings层次选择器的用法（附带实例）

相关文章