jQuery 选择器 (prev ~ siblings)

jQuery 选择器 (prev ~ siblings)

定义和用法

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>