JQuery的prev + next选择器

Dear 丶 2022-05-12 00:36 168阅读 0赞

**一 介绍**

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

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

$("prev + next");

prev是指任何有效的选择器。

next是一个有效选择器并紧接着prev选择器。

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

$("div + img");

**二 应用**

筛选紧跟在<lable>标记后的<p>标记并改变匹配元素的背景颜色为淡蓝色。

**三 代码**

<script language="javascript" src="JS/jquery-3.1.1.min.js"></script>
    <style type="text/css">
    	.background{background:#cef}
    	body{font-size:12px;}
    </style>
    <div>
        <label>第一个label</label>
        <p>第一个p</p>
        <fieldset>
            <label>第二个label</label>
            <p>第二个p</p>
        </fieldset>
    </div>
    <p>div外面的p</p>
    <script type="text/javascript" charset="GBK">
          $(document).ready(function() {
                $("label+p").addClass("background"); //为匹配的元素添加CSS类
    });
    </script

**四 运行结果**

![36e97546-759d-301c-a283-f01890eed08b.png][]

**五 运行说明**

看到“第一个p”和“第二个p”的段落被添加了背景，而“div外面的p”由于不是label元素的同级元素，所以没有被添加背景。

[36e97546-759d-301c-a283-f01890eed08b.png]: /images/20220512/63e741854ade4dc78ea64f073cbb2570.png

发表评论取消回复

表情：

评论列表（有 0 条评论，168人围观）

还没有评论，来说两句吧...

相关阅读

相关 jQuery选择器、jQuery关系选择器、jQuery伪选择器

一、jQuery选择器 1、父元素(向上遍历单一层级)：parent() 2、祖先元素：parents(selector) 3、子元素(向下遍历单一层级)：child

本是古典何须时尚/ 2023年10月07日 11:58/ 0 赞/ 33 阅读

相关 C++STL库神器：next_permutation与prev_permutation

next\_permutation() 与 prev\_permutation() 相同之处头文件：algorithm 使用方法： next\_permut

阳光穿透心脏的1/2处/ 2023年02月27日 13:52/ 0 赞/ 127 阅读

相关 jQuery prev~siblings选择器

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

左手的ㄟ右手/ 2022年07月13日 10:26/ 0 赞/ 134 阅读

相关 jQuery prev+next选择器

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

偏执的太偏执、/ 2022年07月13日 10:26/ 0 赞/ 161 阅读

相关 jQuery的prev~siblings选择器

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

红太狼/ 2022年05月12日 00:36/ 0 赞/ 128 阅读

相关 JQuery的prev + next选择器

一介绍 prev + next选择器用于匹配所有紧接在prev元素后的next元素。其中，prev和next是两个相同级别的元素。 prev + next选择器的使用方法

Dear 丶/ 2022年05月12日 00:36/ 0 赞/ 169 阅读

相关 jQuery-jQuery选择器

jQuery 选择器 jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。 jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择

雨点打透心脏的1/2处/ 2022年04月17日 07:05/ 0 赞/ 439 阅读

相关 jQuery找兄弟系列next(),nextAll(),nextUntil(),prev(),prevAll(),prevUntil(),siblings()

作者：老默 [http://www.cnblogs.com/laomo/ ][http_www.cnblogs.com_laomo] jQuery找兄弟系列next(),ne

亦凉/ 2022年04月17日 03:13/ 0 赞/ 167 阅读

相关 jquery中获取相邻元素相关的命令：next()、prev()和siblings()

jquery里我们要获取某个元素的相邻元素时，可以用到的命令有三个： next():用来获取下一个同辈元素。 prev():用来获取上一个同辈元素。 siblings()

阳光穿透心脏的1/2处/ 2022年02月26日 16:24/ 0 赞/ 383 阅读

相关 django-next-prev教程地址

[https://pypi.org/project/django-next-prev/][https_pypi.org_project_django-next-prev]

女爷i/ 2022年01月14日 13:31/ 0 赞/ 235 阅读