jQuery逆引きリファレンス
親子／兄弟関係にある要素を取り出すには？ ― 階層セレクター
jQueryの$()関数で、複数の要素から構成される階層構造において、ある要素の子要素／子孫要素／直後の要素／以降の要素などを絞り込んで取り出す方法を説明する。
階層セレクターを利用することで、要素同士の位置関係（親子／兄弟要素）で要素を特定できるようになりますので、より目的の要素を絞り込みやすくなります。別稿「TIPS：id値／タグ名／クラス名で特定の要素を取り出すには？」でも触れた基本セレクターなどとの組み合わせで利用します。
1ある要素の配下にある要素だけを取得する
$('ancestor descendant')の形式で、ある要素ancestorの配下から要素descendantを検索します。セレクターの間は空白で区切ります。
例えば以下は、id="main"である要素配下からclass="keyword"要素を取り出し、ハイライト表示する例です。
|
<!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>
|
2ある要素の直下にある要素だけを取得する
$('parent > child')の形式で、ある要素parentの直下にある要素childを検索します。セレクターの間は「>」で区切ります。
例えば以下は、先ほどの例を書き換えて、id="main"である要素直下からclass="keyword"要素を取り出し、ハイライト表示するようにしたものです。
|
$(function() {
$('#main > .keyword').css('background-color', 'Yellow');
});
|
結果を見ると、今度はid="main"である要素の直接の子要素でないものは、ハイライト表示されないことが確認できます。目的がはっきりしているならば、まずは（1の空白区切りよりも）2の>を優先して利用するようにしてください。その方が検索効率も向上しますし、意図せぬ要素が取り出されることもないからです。
3ある要素の次の要素を取得する
$('prev + next')の形式で、ある要素prevの次に登場する要素nextを検索します。セレクター間の区切り文字は「+」です。
例えば以下は、id="author"である要素の次に登場するclass="keyword"要素（1つだけ）を取り出し、ハイライト表示する例です。
|
<script>
$(function() {
$('#author + .keyword').css('background-color', 'Yellow');
});
</script>
|
4ある要素の以降に登場する要素を取得する
$('prev ~ siblings')で、ある要素prevの以降に登場する兄弟要素siblings全てを取得できます。セレクター間の区切り文字は「~」です。+が単一の要素を取得するのに対して、~は複数の要素を取り出す点に注目です。
例えば以下は、id="author"である要素の次以降に登場する、全てのclass="keyword"要素を取り出し、ハイライト表示する例です。
|
<script>
$(function() {
$('#author ~ .keyword').css('background-color', 'Yellow');
});
</script>
|
API：jQuery()｜$() カテゴリ：Core（コア）
処理対象：階層 カテゴリ：セレクター
API：子孫要素セレクター ("先祖 子孫")｜子要素セレクター ("親要素 > 子要素")｜直後の要素セレクター ("prev + next")｜以降の要素セレクター ("prev ~ siblings") カテゴリ：Selectors（セレクター） > Hierarchy（階層）
※以下では、本稿の前後を合わせて5回分（第36回～第40回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
36. id値／タグ名／クラス名で特定の要素を取り出すには？ ― 基本セレクター
jQueryプログラミングの基本である$()関数による「#id」「element」「.class」セレクターの使い方を解説する。
37. 属性値で目的の要素を絞り込むには？ ― 属性フィルター
jQueryの$()関数で、属性やその値を条件に要素を絞り込む方法を解説。条件指定には、属性名のみや、属性値の完全一致／部分一致／複数一致などが指定できる。
38. 【現在、表示中】≫ 親子／兄弟関係にある要素を取り出すには？ ― 階層セレクター
jQueryの$()関数で、複数の要素から構成される階層構造において、ある要素の子要素／子孫要素／直後の要素／以降の要素などを絞り込んで取り出す方法を説明する。
39. 登場順序によって取得すべき要素を絞り込むには？ ― 基本フィルター
jQueryの$()関数でフィルター構文を使い、先頭／末尾の要素や、偶数／奇数番目の要素、n番目／n番目より前や後の要素を取り出す方法を説明する。
40. 子要素／テキストによって取得すべき要素を絞り込むには？ ― コンテンツフィルター
:parent／:empty／:contains()／:has()フィルターの基本的な使い方を解説。子要素やテキストを持つ要素／空の要素／特定のテキストを含む要素／指定されたセレクターに合致する子要素を持つ要素を取得できる。
