Deep Insider の Tutor コーナー
>>  Deep Insider は本サイトからスピンオフした姉妹サイトです。よろしく! 
jQuery逆引きリファレンス

jQuery逆引きリファレンス

子要素の位置関係によって取得すべき要素を絞り込むには? ― 子要素フィルター

2016年3月17日

:first-child/:last-childフィルターにより先頭/末尾の子要素を、また:only-childフィルターにより唯一の子要素である要素を、さらに:nth-child/:nth-last-childフィルターにより先頭/末尾からn個おきに子要素を取得する方法を解説。

  • このエントリーをはてなブックマークに追加

る子要素の位置関係によって、取得すべき要素を特定できるようになります。

先頭/末尾の子要素を取得する

 :first-child:last-childフィルターを利用することで、親要素から見て先頭/末尾に相当する要素だけを取得できます。例えば以下は、先頭/末尾の<li>要素に背景色を付与する例です。

HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery TIPS</title>
</head>
<body>
<ul id="bach">
  <li>小フーガ ト短調</li>
  <li>トッカータとフーガ ニ短調</li>
  <li>主よ、人の望みの喜びよ</li>
  <li>シチリアーノ</li>
</ul>
<ul id="beethoven">
  <li>交響曲 第3番 変ホ長調(英雄)</li>
  <li>交響曲 第5番 ハ短調(運命)</li>
  <li>ピアノソナタ 第8番 ハ短調(悲愴)</li>
  <li>ピアノソナタ 第14番 嬰ハ短調(月光)</li>
</ul>
<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
<script>
$(function() {
  $('li:first-child').css('background-color', 'Yellow');
  $('li:last-child').css('background-color', 'Lime');
});
</script>
</body>
</html>
先頭/末尾の子要素を特定するコード(firstChild.html)
先頭/末尾の<li>要素に背景色が付与された
先頭/末尾の<li>要素に背景色が付与された

 別稿「TIPS:登場順序によって取得すべき要素を絞り込むには?」で登場した:first:lastにも似ていますが、こちらは取得した要素セット全体から先頭/末尾の要素を取り出します。先ほどのリストを:first:lastフィルターで書き換えて、結果の変化も確認しておきましょう。

JavaScript
$(function() {
  $('li:first').css('background-color', 'Yellow');
  $('li:last').css('background-color', 'Lime');
});
要素セットの先頭/末尾を特定するコード(firstChild.html)
要素セットの先頭/末尾に当たる<li>要素に背景色が付与された
要素セットの先頭/末尾に当たる<li>要素に背景色が付与された

 :first:lastフィルターは要素セット全体から先頭/末尾を認識しますので、それぞれ取り出されるべき要素は1つに特定されます。一方、first-child:last-childフィルターでは、親要素を基点としてそれぞれの先頭/末尾の子要素を取り出しますので、親要素の数だけ先頭/末尾があるということです。

唯一の子要素である要素を取得する

 :only-childフィルターは、その要素が唯一の子要素である場合に、その要素を取得します。例えば以下は、<div>要素の配下に、<button>要素が1つだけ配置されている場合に、枠線を付与する例です。

HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery TIPS</title>
</head>
<body>
<div>
  <button type="button">サポートサイトへ</button>
</div>
<div>
  <button type="button">質問は掲示板へ</button>
  <button type="button">他のページへ</button>
</div>
<div>
  サンプルファイルはこちらから!
  <button type="button">ダウンロード</button>
</div>
<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
<script>
$(function() {
  $('button:only-child').css('border', 'solid 5px Red');
});
</script>
</body>
</html>
唯一の子要素を特定するコード(only.html)
<button>要素が唯一の子要素である場合、枠線を付与
<button>要素が唯一の子要素である場合、枠線を付与

 :only-childフィルターはあくまで要素が唯一であるかを判定するだけですので、本体テキストがあっても構わない点に注意してください。例えば最後の例は、<button>要素と並列にテキストはありますが、要素としては<button>が1つだけなので、セレクターとしては合致しています。

n個おきに子要素を取得する

 :nth-childフィルターを利用することで、n個おきに子要素を取得できます。他のフィルターに比べるとやや複雑な動きをしますので、まずは、具体的なコードをいくつか挙げていくことにしましょう。

 まずは、3個おきに<li>要素の文字色を赤に変化させる例です。

HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery TIPS</title>
</head>
<body>
<ul>
  <li>小フーガ ト短調</li>
  <li>トッカータとフーガ ニ短調</li>
  <li>主よ、人の望みの喜びよ</li>
  <li>シチリアーノ</li>
  <li>交響曲 第3番 変ホ長調(英雄)</li>
  <li>交響曲 第5番 ハ短調(運命)</li>
  <li>ピアノソナタ 第8番 ハ短調(悲愴)</li>
  <li>ピアノソナタ 第14番 嬰ハ短調(月光)</li>
</ul>
<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
<script>
$(function() {
  $('li:nth-child(3n)').css('color', 'Red');
});
</script>
</body>
</html>
n個おきに要素を取得するコード(nth.html)
3個おきに<li>要素の文字色が赤に変化
3個おきに<li>要素の文字色が赤に変化

 :nth-childフィルターに渡された「3n」が「3個おき」を表します。nに対して0、1、2……と渡していったときの値(0、3、6……)が何番目の子要素に合致するかを表すわけです(ここでは、0、3、6……番目の要素)。

 同じく、3n+2のようにすることで、2、5、8……番目の要素を取り出すことができます。式を差し替えて、その変化を確認してみるのも良い勉強です。

「li:nth-child(3n+2)」の場合の結果
「li:nth-child(3n+2)」の場合の結果

 その他、特別な値として「odd(奇数)」「even(偶数)」を指定することもできます。

「li:nth-child(even)」の場合の結果
「li:nth-child(even)」の場合の結果

 また、シンプルに固定値として「3」のような値を指定することで、3番目の要素を取り出すこともできます。

「li:nth-child(3)」の場合の結果
「li:nth-child(3)」の場合の結果

末尾からn個おきに子要素を取得する[1.9]

 :nth-childフィルターが前方から要素を数えるのに対して、後方から数えたい場合には:nth-last-childフィルターを利用します。例えば以下は、末尾から2、5、8……番目の要素を取り出す例です。

HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery TIPS</title>
</head>
<body>
<ul>
  <li>小フーガ ト短調</li>
  <li>トッカータとフーガ ニ短調</li>
  <li>主よ、人の望みの喜びよ</li>
  <li>シチリアーノ</li>
  <li>交響曲 第3番 変ホ長調(英雄)</li>
  <li>交響曲 第5番 ハ短調(運命)</li>
  <li>ピアノソナタ 第8番 ハ短調(悲愴)</li>
  <li>ピアノソナタ 第14番 嬰ハ短調(月光)</li>
</ul>
<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
<script>
$(function() {
  $('li:nth-last-child(3n+2)').css('color', 'Red');
});
</script>
</body>
</html>
要素を末尾から数えるためのコード(nthLast.html)
末尾から2、5、8……番目の要素の文字色を変更
末尾から2、5、8……番目の要素の文字色を変更
処理対象:jQueryオブジェクト カテゴリ:コア
API:jQuery()|$() カテゴリ:Core(コア)
処理対象:子要素フィルター カテゴリ:セレクター
API::first-childフィルター|:last-childフィルター|:only-childフィルター|:nth-childフィルター|:nth-last-childフィルター カテゴリ:Selectors(セレクター) > Child Filter(子要素フィルター)
API::firstフィルター|:lastフィルター カテゴリ:Selectors(セレクター) > Basic Filter(基本フィルター)

※以下では、本稿の前後を合わせて5回分(第39回~第43回)のみ表示しています。
 連載の全タイトルを参照するには、[この記事の連載 INDEX]を参照してください。

jQuery逆引きリファレンス
39. 登場順序によって取得すべき要素を絞り込むには? ― 基本フィルター

jQueryの$()関数でフィルター構文を使い、先頭/末尾の要素や、偶数/奇数番目の要素、n番目/n番目より前や後の要素を取り出す方法を説明する。

jQuery逆引きリファレンス
40. 子要素/テキストによって取得すべき要素を絞り込むには? ― コンテンツフィルター

:parent/:empty/:contains()/:has()フィルターの基本的な使い方を解説。子要素やテキストを持つ要素/空の要素/特定のテキストを含む要素/指定されたセレクターに合致する子要素を持つ要素を取得できる。

jQuery逆引きリファレンス
41. 【現在、表示中】≫ 子要素の位置関係によって取得すべき要素を絞り込むには? ― 子要素フィルター

:first-child/:last-childフィルターにより先頭/末尾の子要素を、また:only-childフィルターにより唯一の子要素である要素を、さらに:nth-child/:nth-last-childフィルターにより先頭/末尾からn個おきに子要素を取得する方法を解説。

jQuery逆引きリファレンス
42. 子要素の型/順番によって取得すべき要素を絞り込むには? ― 子要素フィルター

:first-of-type/:last-of-typeフィルターにより同じ要素の中で先頭/末尾の子要素を、また:only-of-typeフィルターにより同列の子要素に同種の要素が1つしかないものを、さらに:nth-of-type/nth-last-of-typeフィルターにより同じ要素の中でn番目の要素を取得する方法を解説。

jQuery逆引きリファレンス
43. 指定された言語に対応する要素を取得するには? ― :langフィルター

:langフィルターを使って、コンテンツの言語を指定するlang属性の値に応じて要素を取得する方法を説明する。

サイトからのお知らせ

Twitterでつぶやこう!