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對象所有匹配元素的標(biāo)識信息追加到body元素內(nèi)
// 每個元素的標(biāo)識信息形如："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>