KingKong Bruce記事: jQuery - Selectors (2) Hierarchy

jQuery - Selectors (2) Hierarchy - 階層選擇器

jQuery階層選擇器簡介

當我們所要選擇的元素，含有一定的階層關係時，就非常合適使用階層選擇器，例如，<ol>與<li>元素，<ol>一定是<li>父層，<li>一定是<ol>的子層，<li>與<li>之間是平輩關係。又例如，假設我們發表文章，文章是包含在一個<div>元素裡，此<div>元素的id名稱為Post，我想要針對此<div>元素的每一段落(p元素)進行CSS調整，因為我不知道文章本文會有多少段落，如果要使用基礎選擇器，將難以撰寫！DOM本身就是非常結構化、階層化，利用階層選擇器，我們可以很簡單使用如$('div.Post p')或$('div.Post > p')來選擇特定區域裡或符合我特定階層條件的元素來進行相關處理。

jQuery階層選擇器速查表

jQuery階層選擇器
選擇器	說明	範例
parent > child	重點在">"符號。父子階層，上下兩層關係，一個父能有多個子。回傳多個子元素，只包含第一層。	$('ul.topnav > li')
ancestor descendant	重點在兩選擇器之間的"空格"。祖孫階層，上下多層關係，一個祖能有多個孫(孫、曾孫、太孫…)，且孫不限多少層。回傳多個孫元素(descendant)。	$("form input")
prev + next	重點在"+"符號。前後階層，前後兩層關係，似類排隊，一前一後的關係，記得"+"是"緊接著"下一個。回傳符合next元素。	$("label + input")
prev ~ siblings	重點在"~"符號。兄弟階層，平輩、同輩階層關係，左右關係，記得"~"像"水平"、"平行線"。回傳多個兄弟元素(siblings)。	$("#prev ~ div")

這裡介紹的四個階層選擇器">"、"空格"、"+"、"~"，都是重要的基礎選擇器延伸應用，必須了解清楚。在使用階層選擇器時，要小心考慮進入點，我們通常要想要進入點之後的元素，一個清楚的進入點，可以讓程式運作上更有效率。

jQuery階層選擇器範例

parent > child選擇器範例：選擇所有<ul class="topnav">的li子元素。

這個">"選擇器在CSS中能被Safari、Firefox、Opera、Chrome、Internet Explorer 7以上Browser支援，Internet Explorer 6不支援。然而在jQuery中能支援所有Broswer，包含Internet Explorer 6。

<!DOCTYPE html>
<html>
<head>
  <style>
body { font-size:14px; }
</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>                 
<ul class="topnav">
    <li>Item 1</li>
    <li>Item 2 
        <ul><li>Nested item 1</li><li>Nested item 2</li><li>Nested item 3</li></ul>
       </li>
    <li>Item 3</li>
</ul>

<script>
// 1. 選擇ul元素且類別名稱為topnav下的所有li子元素
$("ul.topnav > li").css("border", "3px double red");</script>
</body>
</html>

Item 2裡的ul與li就無border效果，因為它不是子元素。

ancestor descendant選擇器範例：從祖元素取得所有孫元素。

<!DOCTYPE html>
<html>
<head>
  <style>
  body { font-size:14px; }
  form { border:2px green solid; padding:2px; margin:0; 
         background:#efe; }
  div { color:red; }
  fieldset { margin:1px; padding:3px; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <form>
    <div>Form is surrounded by the green outline</div>
    <label>Child:</label>
    <input name="name" />

    <fieldset>
      <label>Grandchild:</label>
      <input name="newsletter" />
    </fieldset>

  </form>
  Sibling to form: <input name="none" />
<script>
// form表單裡的任何input元素
$("form input").css("border", "2px dotted blue");</script>
</body>
</html>

最後一個input元素，因為不是form元素裡的元素，並不會有效果。

prev + next選擇器範例：選擇取接著在label之後的input元素。

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <form>
    <label>Name:</label>
    <input name="name" />
    <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
    </fieldset>
  </form>
  <input name="none" />
<script>
// 選擇緊接著在label之後的input元素
$("label + input").css("color", "blue").val("Labeled!")</script>
</body>
</html>

只要是緊接著label之後的input元素，都會被選擇。最後一個input不會被選擇。

prev ~ siblings選擇器範例：選擇id名稱為prev之後的所有div兄弟元素

$('prev + next')與$('prev ~ sibling')之間最值得注意的不同點是他們選擇範圍。$('prev + next')選擇緊接著的下一個同一層元素，$('prev ~ sibling')選擇緊接著的所有同一層兄弟元素。

<!DOCTYPE html>
<html>
<head>
  <style>
  div,span {
    display:block;
    width:80px;
    height:80px;
    margin:5px;
    background:#bbffaa;
    float:left;
    font-size:14px;
  }
  div#small {
    width:60px;
    height:25px;
    font-size:12px;
    background:#fab;
  }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <div>div (doesn't match since before #prev)</div>
  <span id="prev">span#prev</span>
  <div>div sibling</div>
  <div>div sibling <div id="small">div niece</div></div>
  <span>span sibling (not div)</span>
  <div>div sibling</div>
<script>
// 1. 選擇id名稱為prev之後的所有div兄弟元素
$("#prev ~ div").css("border", "3px groove blue");</script>
</body>
</html>

<span id="prev">元素之後的兄弟div有三個。

這裡請多注意CSS裡的div#small樣式，jQuery的選擇器都是延伸自CSS選擇器，所以你在jQuery學到的選擇器知識或CSS學到的選擇器知識，基本上是可以互通使用的，唯CSS要小心與Internet Explorer相關相容性問題，jQuery本身會處理Broser相容性問題，可放心大膽使用。