jQuery逆引きリファレンス
子要素の型／順番によって取得すべき要素を絞り込むには？ ― 子要素フィルター
: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>要素を取り出し、背景色を付与する例です。
|
<!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>
|
:first-child／:last-childフィルターに似ていますが、要素の種類を識別しますので、異なる種類の要素が混在している場合、結果が変化する点に注意してください。例えば以下は、上のコードをそれぞれ:first-child／:last-childフィルターで置き換えた場合の結果です。2番目の段落では、<strong>要素の前に<i>要素があり、先頭の子要素ではありませんので、セレクターにマッチしていないことが確認できます。
同じ要素の中でn番目の要素を取得する
:nth-child／:nth-last-childフィルターの、要素の型まで加味したフィルターが、:nth-of-type／:nth-last-of-typeフィルターです。
例えば以下は、先頭／末尾からそれぞれ1、4、7……番目の<div>要素に対して背景色を付与する例です。
|
<!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>
|
:nth-child／:nth-last-childフィルターと同じく、「3」のような固定値、odd／evenのような予約値を指定することもできます。
試しに、上のコードを:nth-childフィルターに置き換えて、結果の違いも確認してみましょう。今度は、要素の種類によらず、子要素として1、4、7…… 番目に位置する<div>要素にマッチしていることが分かります。
同列の子要素に同種の要素が1つしかないものを取得する
:only-of-typeフィルターは、同じ親要素を持つ要素で、同種の要素が1つしかないものだけを取得します。
例えば以下は、<div>要素の配下に<button>要素が1つしかない場合にだけ、枠線を付与する例です。同種の要素だけをチェックしますので、例えば<img>要素など、異なる要素が存在しても構いません。
|
<!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>
|
試しに、:only-childフィルターで置き換えた場合の結果も示しておきます。この場合、<button>要素以外に同列の子要素（ここでは<img>要素）がある場合に、確かにセレクターが合致していないことが確認できます。
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］を参照してください。
40. 子要素／テキストによって取得すべき要素を絞り込むには？ ― コンテンツフィルター
:parent／:empty／:contains()／:has()フィルターの基本的な使い方を解説。子要素やテキストを持つ要素／空の要素／特定のテキストを含む要素／指定されたセレクターに合致する子要素を持つ要素を取得できる。
41. 子要素の位置関係によって取得すべき要素を絞り込むには？ ― 子要素フィルター
:first-child／:last-childフィルターにより先頭／末尾の子要素を、また:only-childフィルターにより唯一の子要素である要素を、さらに:nth-child／:nth-last-childフィルターにより先頭／末尾からn個おきに子要素を取得する方法を解説。
42. 【現在、表示中】≫ 子要素の型／順番によって取得すべき要素を絞り込むには？ ― 子要素フィルター
:first-of-type／:last-of-typeフィルターにより同じ要素の中で先頭／末尾の子要素を、また:only-of-typeフィルターにより同列の子要素に同種の要素が1つしかないものを、さらに:nth-of-type／nth-last-of-typeフィルターにより同じ要素の中でn番目の要素を取得する方法を解説。
44. URLフラグメントに一致するid値を持つ要素を取得するには？ ― :targetフィルター
:targetフィルターを使って、URLフラグメントに一致するid属性値の要素を取得する方法を説明する。
