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

jQuery逆引きリファレンス

親子/兄弟関係にある要素を取り出すには? ― 階層セレクター

2016年2月4日

jQueryの$()関数で、複数の要素から構成される階層構造において、ある要素の子要素/子孫要素/直後の要素/以降の要素などを絞り込んで取り出す方法を説明する。

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

 階層セレクターを利用することで、要素同士の位置関係(親子/兄弟要素)で要素を特定できるようになりますので、より目的の要素を絞り込みやすくなります。別稿「TIPS:id値/タグ名/クラス名で特定の要素を取り出すには?」でも触れた基本セレクターなどとの組み合わせで利用します。

1ある要素の配下にある要素だけを取得する

 $('ancestor descendant')の形式で、ある要素ancestorの配下から要素descendantを検索します。セレクターの間は空白で区切ります。

 例えば以下は、id="main"である要素配下からclass="keyword"要素を取り出し、ハイライト表示する例です。

HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery TIPS</title>
</head>
<body>
<div id="main">
<p class="keyword">WINGSプロジェクトとは?</p>
<p>ライター<span id="author">山田祥寛</span>が代表を務める<span class="keyword">執筆コミュニティ</span>です。現在、<span class="keyword">WINGSプロジェクトメンバー</span>を募集中です。</p>
</div>
<div id="sub">
<p class="keyword">WebDeliとは?</p>
<p>Web作成に役立つ「技術情報(コツ・ワザ)」やダウンロード可能な「無料ツール」が満載のサイトです。</p>
</div>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(function() {
  $('#main .keyword').css('background-color', 'Yellow');
});
</script>
</body>
</html>
リスト1 特定の要素配下から要素を検索するコード(hierarchy.html)
図1 「id=
図1 「id="main"」要素配下の「class="keyword"」要素をハイライト表示

2ある要素の直下にある要素だけを取得する

 $('parent > child')の形式で、ある要素parentの直下にある要素childを検索します。セレクターの間は「>」で区切ります。

 例えば以下は、先ほどの例を書き換えて、id="main"である要素直下からclass="keyword"要素を取り出し、ハイライト表示するようにしたものです。

JavaScript
$(function() {
  $('#main > .keyword').css('background-color', 'Yellow');
});
リスト2 特定の要素直下から要素を検索するコード(hierarchy.html)
図2 「id=
図2 「id="main"」要素直下の「class="keyword"」要素をハイライト表示

 結果を見ると、今度はid="main"である要素の直接の子要素でないものは、ハイライト表示されないことが確認できます。目的がはっきりしているならば、まずは(1の空白区切りよりも)2>を優先して利用するようにしてください。その方が検索効率も向上しますし、意図せぬ要素が取り出されることもないからです。

3ある要素の次の要素を取得する

 $('prev + next')の形式で、ある要素prevの次に登場する要素nextを検索します。セレクター間の区切り文字は「+」です。

 例えば以下は、id="author"である要素の次に登場するclass="keyword"要素(1つだけ)を取り出し、ハイライト表示する例です。

HTML
<script>
$(function() {
  $('#author + .keyword').css('background-color', 'Yellow');
});
</script>
リスト3 特定の要素の次にある要素を検索するコード(hierarchy.html)
図3 「id=
図3 「id="author"」要素の次の「class="keyword"」要素をハイライト表示

4ある要素の以降に登場する要素を取得する

 $('prev ~ siblings')で、ある要素prevの以降に登場する兄弟要素siblings全てを取得できます。セレクター間の区切り文字は「~」です。+が単一の要素を取得するのに対して、~は複数の要素を取り出す点に注目です。

 例えば以下は、id="author"である要素の次以降に登場する、全てのclass="keyword"要素を取り出し、ハイライト表示する例です。

HTML
<script>
$(function() {
  $('#author ~ .keyword').css('background-color', 'Yellow');
});
</script>
リスト4 特定の要素の次にある要素を検索するコード(hierarchy.html)
図4 「id=
図4 「id="author"」要素の次以降の「class="keyword"」要素をハイライト表示
処理対象:jQueryオブジェクト カテゴリ:コア
API:jQuery()|$() カテゴリ:Core(コア)
処理対象:階層 カテゴリ:セレクター
API:子孫要素セレクター ("先祖 子孫")|子要素セレクター ("親要素 > 子要素")|直後の要素セレクター ("prev + next")|以降の要素セレクター ("prev ~ siblings") カテゴリ:Selectors(セレクター) > Hierarchy(階層)

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

jQuery逆引きリファレンス
36. id値/タグ名/クラス名で特定の要素を取り出すには? ― 基本セレクター

jQueryプログラミングの基本である$()関数による「#id」「element」「.class」セレクターの使い方を解説する。

jQuery逆引きリファレンス
37. 属性値で目的の要素を絞り込むには? ― 属性フィルター

jQueryの$()関数で、属性やその値を条件に要素を絞り込む方法を解説。条件指定には、属性名のみや、属性値の完全一致/部分一致/複数一致などが指定できる。

jQuery逆引きリファレンス
38. 【現在、表示中】≫ 親子/兄弟関係にある要素を取り出すには? ― 階層セレクター

jQueryの$()関数で、複数の要素から構成される階層構造において、ある要素の子要素/子孫要素/直後の要素/以降の要素などを絞り込んで取り出す方法を説明する。

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

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

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

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

サイトからのお知らせ

Twitterでつぶやこう!