jquery 找同胞系列siblings() ,next() ,nextAll(), nextUntil(), prev(), prevAll(), prevUntil()


注: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也基本一樣,不再重復測試。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM