注:expr是指可選的參數,包含用於匹配元素的選擇器表達式。
.siblings(expr) ---查找所有兄弟(包括哥哥和弟弟)
.next(expr) ---查找緊挨着的弟弟
.nextAll(expr) ---查找所有的弟弟
.nextUntil(expr) ---查找所有弟弟,直到碰到符合expr條件,不包含符合expr條件的那個元素
.prev(expr) ---查找緊挨着的哥哥
.prevAll(expr) ---查找所有哥哥
.prevUntil(expr) ---查找所有哥哥,直到碰到符合expr條件,不包含符合expr條件的那個元素
測試代碼:
1 <body> 2 <div class="first"> 3 <a href="#">我是a標簽</a> 4 <h1>我是h1</h1> 5 <p>我是第1個p</p> 6 <p>我是第2個p</p> 7 <p>我是第3個p</p> 8 <h3>我是h3</h3> 9 <p class="qq">我是類為qq的第四個p</p> 10 <p>我是第五個p</p> 11 <h2>我是h2</h2> 12 </div> 13 </body>
測試1:讓第一個p元素的所有兄弟改變背景顏色。
$('p:first').siblings().css('background','pink')
效果:
測試2:把第一個p元素的所有h2的元素改變。
$('p:first').siblings('h2').css('background','pink')
效果:
測試3:把第一個p元素的下一個弟弟元素改變。
$('p:first').next().css('background-color','red')
效果:
測試4:把第一個p元素的所有弟弟元素改變。
$('p:first').nextAll().css('background','yellow')
效果:
測試5:把第一個p元素,直到有類為qq的元素出現,的所有弟弟元素改變。
$('p:first').nextUntil('.qq').css({'font-size':20,background:'red'})
效果:
prev與next是一樣的,只不過一個是哥哥,一個是弟弟,同樣的prevAll和nextAll,prevUntil和nextUntil也基本一樣,不再重復測試。