KingKong Bruce記事: 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元素

Index：指定第幾個
odd：指定奇數個
even：指定偶數個
: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 文件翻譯編寫。

Child Filters :first-child
Child Filters :last-child
Child Filters :nth-child()
Child Filters :only-child

KingKong Bruce記事

網頁

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