1. 程式人生 > >2-9prev ~ siblings選擇器

2-9prev ~ siblings選擇器

與上一節中介紹的prev + next層次選擇器相同,prev ~ siblings選擇器也是查詢prev 元素之後的相鄰元素,但前者只獲取第一個相鄰的元素,而後者則獲取prev 元素後面全部相鄰的元素,它的呼叫格式如下:

$(“prev ~ siblings”)

其中引數prev與siblings兩者之間通過“~”符號形成一種層次相鄰的關係,表明siblings選擇器獲取的元素都是prev元素之後的同輩元素。

例如,使用prev ~ next選擇器,獲取<p>元素後面相鄰的全部元素,並設定它們在頁面中顯示的內容,如下圖所示:

在瀏覽器中顯示的效果:

可以看出,呼叫$("p~span")選擇器程式碼,獲取了<p>元素下面兩個(全部)的<span>元素,該元素不包含<p>元素上面的元素和不屬於同輩範圍的元素。