jQuery - Selectors (6) Child Filter - 後代過濾器

jQuery後代過濾器簡介

由名稱來看,可以很容易了解此過濾器主要是處理一些後代元素選擇動作。我們在基礎過濾器(Basic Filters)中介紹過:even與:odd,這兩個過濾器常使用於表格的處理,但如果今天我們以三的倍數來計算呢?例如,第3,6,9…行進行處理呢?怎麼做?

jQuery後代過濾器速查表

jQuery後代過濾器
過濾器 說明 範例
:first-child 選擇所有父元素下的第一個子元素 $(':first-child')
:last-child 選擇所有父元素下的最後一個子元素 $(':last-child')
:nth-child(index/even/odd/equation) 選擇元素集合裡第幾個指定的子元素 $(':nth-child(1)')
:only-child 選擇所有父元素下只有一個子元素 $(':only-child')
基本動作有第一個後代元素,最後一個後代元素,只有一個後代元素,n倍數的後代元素,比較難懂的只:nth-child這一個後代過濾器。


jQuery後代過濾器範例

:first-child過濾器範例:選擇div元素下第一個span元素進行處理

選擇所有父元素下的第一個子元素。

<!DOCTYPE html>
<html>
<head>
  <style>
  span { color:#008; }
  span.sogreen { color:green; font-weight: bolder; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <div>
    <span>John,</span>
    <span>Karl,</span>
    <span>Brandon</span>
  </div>
  <div>
    <span>Glen,</span>
    <span>Tane,</span>
    <span>Ralph</span>
  </div>
<script>
// 1. 選擇div元素裡所有span元素
// 2. 選擇第一個span元素
$("div span:first-child")
 // 1. 進行CSS設定
    .css("text-decoration", "underline")
 // 1. 進行切換效果設定
    .hover(function () {
          $(this).addClass("sogreen");
        }, function () {
          $(this).removeClass("sogreen");
        });
</script>
</body>
</html>
雖然:first(Basic Filters)只符合一個單獨的元素,但:first-child過濾器可以符合超過一個的元素,為每個父元素分配第一個子元素,這相當於:nth-child(1)。

:last-child過濾器範例:選擇div元素下最後一個span元素進行處理

選擇所有父元素下的最後一個子元素。

<!DOCTYPE html>
<html>
<head>
  <style>
  span.solast { text-decoration:line-through; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <div>
    <span>John,</span>
    <span>Karl,</span>
    <span>Brandon,</span>
    <span>Sam</span>
  </div>
  <div>
    <span>Glen,</span>
    <span>Tane,</span>
    <span>Ralph,</span>
    <span>David</span>
  </div>
<script>
// 1. 選擇div元素裡所有span元素
// 2. 選擇最後一個span元素
$("div span:last-child")
    .css({color:"red", fontSize:"80%"})
    .hover(function () {
          $(this).addClass("solast");
        }, function () {
          $(this).removeClass("solast");
        });
</script>
</body>
</html>
此範例與:first-child相反,它是選擇父元素之後的子集合元素的最後一個。

雖然:last(Basic Filters)只符合一個單獨的元素,但:last-child過濾器可以符合超過一個的元素,為每個父元素分配最後一個子元素。

:nth-child()過濾器範例:選擇所有ul元素裡的第二個li元素

  1. Index:指定第幾個
  2. odd:指定奇數個
  3. even:指定偶數個
  4. :eq(index):指定第幾個,index從0開始
每個符合的子元素索引值(index)是由1開始,也可以是字串"even"或"odd"或一個運算式(例如,:nth-child(even)或:nth-child(4n))。

<!DOCTYPE html>
<html>
<head>
  <style>
  div { float:left; }
  span { color:blue; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
  <div>
 <ul>
  <li>John</li>
  <li>Karl</li>
  <li>Brandon</li>
 </ul>
  </div>
  <div>
 <ul>
  <li>Sam</li>
 </ul>
  </div>
  <div>
 <ul>
  <li>Glen</li>
  <li>Tane</li>
  <li>Ralph</li>
  <li>David</li>
 </ul>
  </div>
<script>
// 1. 選擇ul元素裡所有li元素
// 2. 選擇li集合裡的第二個元素(n從1開始)
$("ul li:nth-child(2)").append("<span> - 2nd!</span>");</script>
</body>
</html>
因為jQuery實作:nth-child(n)是來自CSS規範,n值是"1索引(1-indexed)",也就是說,是由1開始計數。對於其他選擇器表達式(selector expressions),jQuery遵循JavaScript的"0索引(0-indexed)"來計數,因此,一個<ul>包含兩個<li>,$('li:nth-child(1)')會選擇第一個<li>,$('li:eq(1)')會選擇第二個<li>。

:nth-child(n)虛擬類別很容易與:eq(n)混淆,即使兩者可能導致完全不同的符合元素。用:nth-child(n)所有子元素都會計算在內,不管它們是什麼,和它符合的虛擬類別相連的選擇器(selector),才會選中指定的元素。而:eq(n)只有選擇器(selector)附加到虛擬類別,並不局限於任何子元素或其他元素,且(n+1)個(n是0為基礎)的元素被選擇。

更多的討論,請參考W3C CSS specification

:only-child過濾器範例:選擇div元素下只有一個button子元素

:only-child過濾器適合使用在要過濾選擇出一父一子的情況。

<!DOCTYPE html>
<html>
<head>
  <style>
  div { width:100px; height:80px; margin:5px; float:left; background:#b9e }
</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <div>
  <button>Sibling!</button>
  <button>Sibling!</button>
</div>
<div>
  <button>Sibling!</button>
</div>
<div>
  None
</div>
<div>
  <button>Sibling!</button>
  <button>Sibling!</button>
  <button>Sibling!</button>
</div>
<div>
  <button>Sibling!</button>
</div>
<script>
// 1. 由div元素裡
// 2. 選擇只含有一個button子元素
$("div button:only-child").text("Alone").css("border", "2px blue solid");
</script>
</body>
</html>
只有第二個div元素及第五個div元素符合:only-child條件。如果父元素有其他子元素,就不會符合。

KKBruce補充

後代選擇器中,比較難理解的只有:nth-child(n),因為功能強大,所以可以多花些心思在這裡。n值除了可以是index/even/odd/equation之外,還是能倍數方式指定。


:nth-child(an)

  • a是倍數的數字,必須大於0
  • n是倍數的意思

例如,$('li:nth-child(3n)').css('...'),把第3,6,9…所有3的倍數的li元素設定CSS。

:nth-child(an+b)與:nth-child(an-b)

這裡會進行兩個步驟:
  • 先對元素進行"分組",每組有a個
  • b為每組的編號,從0開始

  • :nth-child(3n+1):每3個一組,從編號1開始。1,4,7,...
  • :nth-child(3n+5):每3個一組,從編號5開始。5,8,11,...
  • :nth-child(5n-1):每5個一組,從第5n-1個開始。4,9,14,...

jQuery基礎選擇器修改歷程

[2012/1/4] 參考 jQuery 1.7 文件翻譯編寫。

沒有留言:

張貼留言

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

无觅相关文章插件,迅速提升网站流量