jQuery 选择器 (prev ~ siblings)

/* 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>