jquery選擇器如何獲取父級元素、同級元素、子元素 一、新建頁面
一、新建頁面
1 <ul> 2 <li>list item 1</li> 3 <li>list item 2</li> 4 <li class="third-item">list item 3</li> 5 <li>list item 4</li> 6 <li>list item 5</li> 7 </ul> 8 9 <p>Hello1</p> 10 <p>Hello2</p> 11 <div> 12 <span>Word</span> 13 </div> 14 15 <ul class="level-1"> 16 <li class="item-i">I</li> 17 <li class="item-ii"> 18 II 19 <ul class="level-2"> 20 <li class="item-a">A</li> 21 <li class="item-b"> 22 B 23 <ul class="level-3"> 24 <li class="item-1">1</li> 25 <li class="item-2">2</li> 26 <li class="item-3">3</li> 27 </ul> 28 </li> 29 <li class="item-c">C</li> 30 </ul> 31 </li> 32 <li class="item-iii">III</li> 33 </ul>
二、獲取父級元素
1、 parent([expr]): 獲取指定元素的所有父級元素
程式碼如下:
|
1 |
|
效果如下：
2、parents()
獲得當前匹配元素集合中每個元素的祖先元素，應用選擇器進行篩選是可選的。
-
- $('li.item-a').parents().css('background-color', 'red');
呼叫的結果是，level-2 列表、專案 II 以及 level-1 列表等元素（沿 DOM 樹一路向上直到 <html>）設定紅色背景。
3、.closest(selector) closest() 方法獲得匹配選擇器的第一個祖先元素，從當前元素開始沿 DOM 樹向上。
三、獲取同級元素
1、.next(selector) 獲得匹配元素緊鄰的下一個同級元素。
2、.nextAll(selector) 獲得匹配元素後面的所有同級元素。
3、.prev(selector) 獲得匹配元素緊鄰的前一個同級元素（與next相反）
4、.prevAll(selector) 獲得當前匹配元素前面的所有同級元素（與nextAll相反）
5、andSelf():
四、獲取子元素
1、.children(selector) 返回匹配元素的子元素。
2、.find(selector) 獲得當前元素的後代
3，查詢子元素：>
例如 ul下所有的li元素 var nods = $("ul > li");
用法如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
|