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

jQuery逆引きリファレンス

子要素の型/順番によって取得すべき要素を絞り込むには? ― 子要素フィルター

2016年3月31日

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

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

 別稿「TIPS:子要素の位置関係によって取得すべき要素を絞り込むには?」では、子要素の位置関係(先頭/末尾、何番目か)によって、目的の要素を絞り込む方法について解説しました。本稿では、引き続いて、同種の要素からn番目の要素を取り出す方法について説明します。

 本稿の内容は、いずれもjQuery 1.9以降で利用できます。

同じ要素の中で先頭/末尾の子要素を取得する

 :first-of-type:last-of-typeフィルターを利用することで、同列の子要素群で、同じ名前を持つ要素の中から、先頭/末尾のものを取り出せます。

 例えば以下は、<p>要素配下の先頭/末尾の<strong>要素を取り出し、背景色を付与する例です。

HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery TIPS</title>
</head>
<body>
<p>
<strong>WINGSプロジェクト</strong>は、当初、ライター山田祥寛のサポート(検証・査読・校正作業)集団という位置づけで開始された<strong>コミュニティ</strong>でした。
</p>
<p>
しかし、2002年12月にメンバーを大幅に増強し、<i>本格的な</i><strong>執筆者プロジェクト</strong>として生まれ変わりました。現在も<strong>執筆メンバーを募集中</strong>です。
</p>
<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
<script>
$(function() {
  $('strong:first-of-type').css('background-color', 'Yellow');
  $('strong:last-of-type').css('background-color', 'Lime');
});
</script>
</body>
</html>
同じ要素の中から先頭/末尾のものを取り出すコード(type.html)
子要素の中で、先頭/末尾にある<strong>要素に着色
子要素の中で、先頭/末尾にある<strong>要素に着色

 :first-child:last-childフィルターに似ていますが、要素の種類を識別しますので、異なる種類の要素が混在している場合、結果が変化する点に注意してください。例えば以下は、上のコードをそれぞれ:first-child:last-childフィルターで置き換えた場合の結果です。2番目の段落では、<strong>要素の前に<i>要素があり、先頭の子要素ではありませんので、セレクターにマッチしていないことが確認できます。

:first-child/:last-childフィルターで置き換えた場合
:first-child/:last-childフィルターで置き換えた場合

同じ要素の中でn番目の要素を取得する

 :nth-child:nth-last-childフィルターの、要素の型まで加味したフィルターが、:nth-of-type:nth-last-of-typeフィルターです。

 例えば以下は、先頭/末尾からそれぞれ1、4、7……番目<div>要素に対して背景色を付与する例です。

HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery TIPS</title>
<style>
#main div {
  float: left;
  height: 100px;
  width: 100px;
  border: solid 1px #000;
}
#main span {
  float: left;
  height: 100px;
  width: 100px;
  border: dashed 1px #000;
}
</style>
</head>
<body>
<div id="main" class="clearfix">
  <div>1</div>
  <div>2</div>
  <span>3</span>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <span>8</span>
  <div>9</div>
  <div>10</div>
</div>
<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
<script>
$(function() {
  $('div:nth-of-type(3n+1)').css('background-color', 'Yellow');
  $('div:nth-last-of-type(3n+1)').css('background-color', 'Lime');
});
</script>
</body>
</html>
同じ要素の中からn番目のものを取り出すコード(typeNth.html)
1、4、7……番目の<div>要素に対して背景色を黄色に、後ろから1、4、7……番目の<div>要素に対して背景色を緑色に

 :nth-child:nth-last-childフィルターと同じく、「3」のような固定値、oddevenのような予約値を指定することもできます。

 試しに、上のコードを:nth-childフィルターに置き換えて、結果の違いも確認してみましょう。今度は、要素の種類によらず、子要素として1、4、7…… 番目に位置する<div>要素にマッチしていることが分かります。

:nth-childフィルターに置き換えた場合

同列の子要素に同種の要素が1つしかないものを取得する

 :only-of-typeフィルターは、同じ親要素を持つ要素で、同種の要素が1つしかないものだけを取得します。

 例えば以下は、<div>要素の配下に<button>要素が1つしかない場合にだけ、枠線を付与する例です。同種の要素だけをチェックしますので、例えば<img>要素など、異なる要素が存在しても構いません。

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>
  <img src="http://www.wings.msn.to/image/wings.jpg" />
  <button type="button">ダウンロード</button>
</div>
<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
<script>
$(function() {
  $('button:only-of-type').css('border', 'solid 5px Red');
});
</script>
</body>
</html>
同種の要素が同列に1つしか存在しないものを取り出すコード(typeOnly.html)
同列の子要素に<button>要素が1つしかない場合に枠線を付与
同列の子要素に<button>要素が1つしかない場合に枠線を付与

 試しに、:only-childフィルターで置き換えた場合の結果も示しておきます。この場合、<button>要素以外に同列の子要素(ここでは<img>要素)がある場合に、確かにセレクターが合致していないことが確認できます。

<button>要素以外に同列の子要素があるので合致しない
<button>要素以外に同列の子要素があるので合致しない
処理対象:jQueryオブジェクト カテゴリ:コア
API:jQuery()|$() カテゴリ:Core(コア)
処理対象:子要素フィルター カテゴリ:セレクター
API::first-of-typeフィルター|:last-of-typeフィルター|:first-childフィルター|:last-childフィルター|:nth-of-typeフィルター|:nth-last-of-typeフィルター|:nth-childフィルター|:nth-last-childフィルター|:only-of-typeフィルター|:only-childフィルター カテゴリ:Selectors(セレクター) > Child Filter(子要素フィルター)

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

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属性の値に応じて要素を取得する方法を説明する。

jQuery逆引きリファレンス
44. URLフラグメントに一致するid値を持つ要素を取得するには? ― :targetフィルター

:targetフィルターを使って、URLフラグメントに一致するid属性値の要素を取得する方法を説明する。

サイトからのお知らせ

Twitterでつぶやこう!