jQuery搜尋同儕元素方法_jquery

本文實例講述了jQuery搜尋同儕元素方法。分享給大家供大家參考。具體分析如下：

1. next()方法

用於搜尋緊接在每個匹配元素之後的單一同儕元素，根據需要還可以指定一個選擇器對同儕元素進行篩選，語法格式如下：

複製程式碼 程式碼如下:

next([selector])
$("p").next("p").css("color", "#FCF");

2. nextAll()方法

用於搜尋緊接在每個匹配元素之後的所有同儕元素，根據需要還可以指定一個選擇器對同儕元素進行篩選

複製程式碼 程式碼如下:

nextAll([selector])
$("p").nextAll().css("color", "blue");

3. nextUtil()方法

用於取得緊接在每個符合元素後面的同儕元素，直到符合給定選擇器的元素(但不包含該元素)，格式如下：

複製程式碼 程式碼如下:

nextUtil([selector])

實例：

複製程式碼 程式碼如下:

$("#div1").nextUtil("div" ).css("border", "1px solid red");

將id為div1的元素開始到下一個div元素結束的所有中間的同儕元素的邊框設定為紅色

4. prev()方法

用於搜尋緊鄰每個匹配元素前面的單一同儕元素，根據需要還可以指定一個選擇器對同儕元素進行篩選，語法格式如下：

複製程式碼 程式碼如下:

prev([selector])

實例：

複製程式碼 程式碼如下:

$("#div2").prev("span" ).css("color", "blue");

與div2元素緊鄰的前面的一個span元素的字體將變為藍色。

5. prevAll()方法

用於搜尋目前元素之前的所有同儕元素，也可以指定一個選擇器對同儕元素進行篩選。文法格式如下：

複製程式碼 程式碼如下:

prevAll([selector])

6. prevUtil()方法

用於搜尋目前元素之前的所有同儕元素，直到遇到符合的那個元素為止，語法格式如下：

複製程式碼 程式碼如下:

prevUtil([selector])
$("#div2").prevUtil("input").css("color", "red");

7. siblings()方法

用於搜尋每個符合元素的所有同儕元素，根據需要也可以指定一個選擇器對這些同儕元素進行篩選。格式如下：

複製程式碼 程式碼如下:

siblings([selector])
$("div").siblings().css("color", "red");

範例如下：

複製程式碼 程式碼如下:

 
 
 
 
 
 
 
 
 

飯店房間住宿狀況表

 
 
   
     
     
     
     
     
   
   
     
     
     
     
     
   
   
     
     
     
     
     
   
   
     
     
     
     
     
   
   
     
     
     
     
     
   

單人房（已住）	雙人房（未住）	豪華套房（已住）	單人房（已住）	豪華套房（未住）
單人房（已住）	雙人房（未住）	豪華套房（未住）	單人房（未住）	豪華套房（未住）
單人房（未住）	雙人房（未住）	豪華套房（已住）	單人房（已住）	豪華套房（未住）
單人房（已住）	雙人房（已住）	豪華套房（未住）	單人房（未住）	豪華套房（已入住）
單人房（已住）	雙人房（未住）	豪華套房（已入住）	單人房（已住）	豪華套房（未住）

 
 

效果圖如下：

希望本文所述對大家的jQuery程式設計有所幫助。