视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
对jQuery中prev+next选择器的基本介绍及用法详解
2020-11-27 20:19:12 责编:小采
文档


jQuery的prev + next选择器用于匹配紧接在prev元素后面的同辈next元素,将其封装为jQuery对象并返回。

注意:选择器next的查找范围必须是与"prev元素"相邻的下一个元素,并且必须是"prev元素"的同辈元素。

语法

// 这里的prev表示具体的选择器
// 这里的next表示具体的选择器
jQuery( "prev + next" )

+号两侧的空格可以省略,但不建议省略,否则字符过于紧密可能影响阅读。

参数

参数 描述

prev 一个有效的选择器。

next 一个有效的选择器。

返回值

返回封装了与"prev元素"紧邻的下一个同辈元素中、符合选择器next的DOM元素的jQuery对象。

虽然与一个"prev元素"紧邻的下一个同辈元素最多只有一个,但是"prev元素"可以有多个,因此匹配到的DOM元素也可以有多个,并且都被封装在返回的jQuery对象中。

如果找不到任何相应的匹配,则返回一个空的jQuery对象。

示例&说明

以下面这段HTML代码为例:

<div id="n1">
 <p id="n2" class="test">
 <span id="n3" class="a">Hello</span>
 <span id="n4">Hello</span>
 </p>
 <p id="n5" class="detail">
 <span id="n6" class="b codeplayer">World
 <span id="n7" class="a">http://365mini.com</span>
 <span id="n8"></span>
 <span id="n9"></span>
 </span>
 </p>
</div>

现在,我们想要查找与p标签相邻的下一个同辈p标签,则可以编写如下jQuery代码:

// 选择了id为n5的一个元素
$("p + p");

接着,我们查找与span标签相邻的下一个同辈span标签,则可以编写如下jQuery代码:

// 选择了id分别为n4、n8、n9的三个元素
// n4是n3的next,n8是n7的next,n9是n8的next
$("span + span");

查找与包含类名a的span标签相邻的下一个同辈span标签,对应的jQuery代码如下:

// 选择了id分别为n4、n8的两个元素
// n8没有包含类名a,因此无法匹配其next——n9
$("span.a + span");

查找与p标签相邻的下一个同辈span标签,对应的jQuery代码如下:

// 返回一个空的jQuery对象
// HTML中虽然有span标签,但不是p标签的同辈元素,而是其子代或后代
$("p + span");

下载本文
显示全文
专题