jQuery 选择器 (prev + next)

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


<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分别为n4、n8、n9的三个元素
// n4是n3的next，n8是n7的next，n9是n8的next
$("span + span").showTagInfo();

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

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