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

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

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

prev+next 选择器用于匹配所有紧接在 prev 元素后的 next 元素。其中，prev 和 next 是两个同辈元素。

prev+next 选择器的使用方法如下：

$("prev + next");

prev 选择器的第一部分，可以是任何有效的元素；
next 选择器的第二部分，用以匹配紧跟在 prev 元素后的元素。

例如，要匹配 <div> 标记后的 <img> 标记，可以使用下面的 jQuery 代码：

$("div + img");

【实例】匹配紧接在 <label> 标记后的 <p> 标记并改变匹配元素的背景颜色为淡蓝色。
1) 创建一个名为 index.html 的文件，在该文件的 <head> 标记中使用下面的语句引入 jQuery 库。

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

2) 在页面的 <body> 标记中，首先添加一个 <div> 标记，并在该 <div> 标记中添加两个 <label> 标记和两个 <p> 标记，其中第二个 <label> 标记和 <p> 标记用 <fieldset> 标记括起来；然后在 <div> 标记的下方再添加一个 <p> 标记。关键代码如下：

<div>
    <label>第一个 label 标记</label>
    <p>第一个 p 标记</p>
    <fieldset>
        <label>第二个 label 标记</label>
        <p>第二个 p 标记</p>
    </fieldset>
</div>
<p>div 标记外面的 p 标记</p>

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

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

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

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

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

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

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

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

相关文章