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

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

[山田祥寛(http://www.wings.msn.to/),著]



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

連載目次


 「:nth-child(exp)」フィルタを利用することで、条件に合致した親要素(群)の中から特定の子要素を取り出すことができます。この:nth-childフィルタはなかなか高機能なフィルタで、odd(偶数)/even(奇数)、インデックス番号のような指定ができるほか、式を指定することでn行おきのような指定も表現できます。

 以下、それぞれの指定による結果の変化を確認します。

(1):nth-childフィルタにより偶数/奇数番目の子要素を取得する

 以下は、odd(奇数)番目、even(偶数)番目の子要素に対して、背景色(ライムと黄色)を指定する例です。

<script type="text/javascript">

$(function() {
  $('ol > li:nth-child(odd)').css('background-color', 'Lime');
  $('ol > li:nth-child(even)').css('background-color', 'Yellow');
});

</script>

</head>
<body>
<ol>
  <li>高江</li>
  <li>花田</li>
  <li>横塚</li>
  <li>和田</li>
  <li>斉藤</li>
</ol>
<ol>
  <li>長田</li>
  <li>杉山</li>
  <li>星山</li>
  <li>杉沼</li>
</ol>

リスト015 :nth-childフィルタにより偶数/奇数番目の子要素を取得(NthChild.html)
このHTMLを実際にブラウザで開く


ブラウザで開く

リスト015の実行結果

 前述の:odd、:evenフィルタとも似ていますが、2つの点で異なります。

 1つに、:odd、:evenフィルタのインデックス番号は0始まりですが、:nth-childフィルタのインデックス番号は1始まりであるという点、もう1つは、:odd/:evenフィルタは「要素セット全体」からその奇数/偶数要素を取り出しますが、:nth-childフィルタは「親要素を基点に」それぞれの先頭末尾要素を取り出すという点です。後者の関係は、前述の:first/:lastフィルタと:first-child/:last-childフィルタのそれと同様といえます。

(2):nth-childフィルタにより指定インデックスの子要素を取得する

 次に、親要素に対して3番目の子要素に対して、背景色を指定してみましょう。

<script type="text/javascript">

$(function() {
  $('ol > li:nth-child(3)').css('background-color', 'Lime');
});

</script>

……中略……

<ol>
  <li>高江</li>
  <li>花田</li>
  <li>横塚</li>
  <li>和田</li>
  <li>斉藤</li>
</ol>
<ol>
  <li>長田</li>
  <li>杉山</li>
  <li>星山</li>
  <li>杉沼</li>
</ol>

リスト016 :nth-childフィルタにより指定インデックスの子要素を取得(NthChild2.html)
このHTMLを実際にブラウザで開く


ブラウザで開く

リスト016の実行結果

 :eqフィルタと似ていますが、先ほどの:odd/:evenフィルタと同じく、インデックス番号や基点となる要素が異なりますので要注意です。

(3):nth-childフィルタによりn行おきに子要素を取得する

 任意の式を指定することで、n行おきに子要素を取得することもできます。例えば、2、5、8行目……のように3行おきに(「3で割ったときの余りが2」番目の)要素を取得したい場合には、以下のように記述できます。

<script type="text/javascript">

$(function() {
  $('ol > li:nth-child(3n + 2)').css('background-color', 'Lime');
});

</script>

……中略……

<ol>
  <li>高江</li>
  <li>花田</li>
  <li>横塚</li>
  <li>和田</li>
  <li>斉藤</li>
  <li>長田</li>
  <li>杉山</li>
  <li>星山</li>
  <li>杉沼</li>
</ol>

リスト017 :nth-childフィルタによりn行おきに子要素を取得(NthChild3.html)
このHTMLを実際にブラウザで開く


ブラウザで開く

リスト017の実行結果

 このように、指定した式(ここでは「3n + 2」)に、n=0、1、2、……と当てはめていったときの値がインデックス値として採用されるわけです。

Copyright© Digital Advantage Corp. All Rights Reserved.

RSSについて

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

メールマガジン登録

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