第1回 セレクタ編連載:jQuery逆引きリファレンス(12/25 ページ)

» 2009年10月09日 00時00分 公開



「連載:jQuery逆引きリファレンス」のインデックス

連載目次


 条件に合致した親要素(群)の先頭/末尾の子要素を取り出すには、:first-childフィルタ/:last-childフィルタを使います。

 以下は、<ul>要素直下にある先頭/末尾の<li>要素を取り出す例です。先頭の<li>要素に背景色(ライム)を指定し、最後の<li>要素には枠線を追加します。

<script type="text/javascript">

$(function() {
  $('ul > li:first-child').css('background-color', 'Lime');
  $('ul > li:last-child').css('border', 'solid 1px #FF0000');
});

</script>
</head>
<body>
<ul>
  <li>先頭です。</li>
  <li>途中です。</li>
  <li>途中です。</li>
  <li>最後です。</li>
</ul>
<ul>
  <li>先頭です。</li>
  <li>途中です。</li>
  <li>途中です。</li>
  <li>最後です。</li>
</ul>

リスト011 指定された親要素の先頭/末尾の子要素を取得(FirstLastChild.html)
このHTMLを実際にブラウザで開く


ブラウザで開く

リスト011の実行結果

 この結果だけを見てしまうと、:first/:lastフィルタとの区別が付きにくいかもしれません。もう1つ、サンプル・コードを見てみましょう。以下は、上記リスト011の関数本体部分を書き換えたコードです。

$('ul > li:first').css('background-color', 'Lime');
$('ul > li:last').css('border', 'solid 1px #FF0000');

リスト012 FirstLastChild2.html(書き換え部分のみ)
「:first-child/:last-childフィルタ」を「:first/:lastフィルタ」に書き換えている。このHTMLを実際にブラウザで開く


ブラウザで開く

リスト012の実行結果

 :first-child/:last-childを、それぞれ:first/:lastに書き換えただけですが、結果は異なります。このように、:first/:lastは、取得された「要素セット全体」からその先頭/末尾要素を取り出しますが、:first-child/:last-childは、「親要素を基点に」それぞれ直下の先頭末尾要素を取り出します(つまり、親要素の数だけ先頭/末尾要素もあるということです)。

Copyright© Digital Advantage Corp. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。