jQuery 选择器 (prev ~ siblings)

2018-11-23 16:56 更新

jQuery 选择器 (prev ~ siblings)

jQuery 选择器 jQuery 选择器


定义和用法

jQuery的prev ~ siblings选择器用于匹配prev元素之后的所有同辈的siblings元素,将其封装为jQuery对象并返回。

注意: 选择器siblings的查找范围必须是"prev元素"之后的元素,并且是同辈元素(即与"prev元素"有同一个的父元素)。


语法

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

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


参数

参数描述
prev一个有效的选择器。
siblings一个有效的选择器。

返回值

返回封装了位于"prev元素"之后的同辈元素中、符合选择器siblings的DOM元素的jQuery对象。

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


实例

实例

以下面这段代码为例:

/* HTML代码 */
<div id="n1">
    <p id="n2" class="test">
        <span id="n3" class="a">Welcome</span>
        <span id="n4">Welcome</span>
    </p>
    <p id="n5" class="detail">
        <span id="n6" class="b codeplayer">To
            <span id="n7" class="a">w3cschool.cn</span>
            <span id="n8"></span>
            <span id="n9"></span>
        </span>
    </p>
</div>

/* jQuery代码 */
<script>
// 扩展jQuery对象,添加showTagInfo()方法
// 用于将jQuery对象所有匹配元素的标识信息追加到body元素内
// 每个元素的标识信息形如:"tagName"或"tagName#id"
jQuery.fn.showTagInfo = function(){
var tags = this.map( function(){
return this.tagName + ( this.id ? "#" + this.id : "" ); 
} ).get();
$("body").append( tags.join("<br>") + "<br><br>" );
};

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

// 选择了id为n9的一个元素
// n7虽然也是n8的同辈元素,但不在n8之后,而是之前,因此匹配不到
$("#n8 ~ span").showTagInfo();

// 选择了id分别为n4、n8、n9的三个元素
// n9属于n7的~siblings,也是n8的~siblings,同一个元素只计入一次
$("span ~ span").showTagInfo();
</script>

尝试一下 »

点击 "尝试一下" 按钮查看在线实例


jQuery 选择器 jQuery 选择器

以上内容是否对您有帮助:
前端课程
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号

意见反馈
返回顶部