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相容性問題,可放心大膽使用。

jQuery階層選擇器修改歷程

[2011/12/14] 參考 jQuery 1.7 文件翻譯編寫。

2 則留言:

感謝您的留言,如果我的文章你喜歡或對你有幫助,按個「讚」或「分享」它,我會很高興的。