jQueryで子要素や孫要素を取得する方法です。
わざわざメソッドを使わずに、セレクタで簡単に指定することも出来ます。
目次
セレクタで子要素を指定
>（大なり）でつなげる
$(‘div > p’)
親要素の直下にある子要素を取得し、孫要素などは取得できません。
スペースを空ける
$(‘div p’)
親要素内にある子要素や孫要素を取得できます。便利なのでよく使います。
サンプル
|
1 2 3 4 5 6 7 |
$(function() { // <div>の子孫要素にcssで赤文字にする $('div > p').css('color','red'); $('div span').css('color','red'); }); |
children() で子要素を取得
親要素の直下にある子要素を取得し、孫要素などは取得できません。
基本構文
$(‘div’).children()
>（大なり）で指定したときと同じ動作になります。
子要素を赤文字にするサンプル
HTML
|
1 2 3 |
<div> <p>子要素を取得。</p> </div> |
jQuery
|
1 2 3 4 5 6 |
$(function() { // <div>の子要素にcssで赤文字にする $('div').children().css('color','red'); }); |
結果
|
1 2 3 |
<div> <p style="color:red">子要素を取得。</p> </div> |
子要素を取得。
<div>の子要素の<p>要素にcssが適用され、赤文字になりました。
特定の子要素だけにスタイルを適用するサンプル
複数の子要素の中から、特定の子要素だけを指定することもできます。
HTML
|
1 2 3 4 5 |
<div> <p>子要素1</p> <p class="text">子要素2</p> <p>子要素3</p> </div> |
jQuery
|
1 2 3 4 5 6 |
$(function() { // childrenに特定の要素やclassなどを指定する $('div').children('.text').css('color','red'); }); |
結果
|
1 2 3 4 5 |
<div> <p>子要素1</p> <p class="text" style="color:red">子要素2</p> <p>子要素3</p> </div> |
子要素1
子要素2
子要素3
children()の引数にclassを指定すると、<div>の子要素で、classがtextの<p>要素のみcssが適用されました。
find() で子要素、孫要素を取得
find()は子孫要素を取得できる便利なメソッドです。使うことも多いですね。
基本構文
$(‘div’).find(‘span’)
スペースを空けて繋げたときと同じ動作になります。
特定の孫要素にスタイルを適用するサンプル
子要素の子要素、つまり孫要素を指定することもできます。
HTML
|
1 2 3 4 5 |
<div> <p>子要素1</p> <p><span>子要素2</span></p> <p>子要素3</p> </div> |
jQuery
|
1 2 3 4 5 6 |
$(function() { // findに特定の要素やclassなどを指定する $('div').find('span').css('color','red'); }); |
結果
|
1 2 3 4 5 |
<div> <p>子要素1</p> <p><span style="color:red">子要素2</span></p> <p>子要素3</p> </div> |
子要素1
子要素2
子要素3
find()の引数に要素を指定すると、<div>の孫要素<span>にcssが適用されました。
複数の孫要素にスタイルを適用するサンプル
複数の孫要素をカンマ区切りで指定することもできます。
HTML
|
1 2 3 4 5 |
<div> <p>子要素1</p> <p><span>子要素2</span></p> <p><em>子要素3</em></p> </div> |
jQuery
|
1 2 3 4 5 6 |
$(function() { // findに複数の孫要素をカンマ区切りで指定する $('div').find('span,em').css('color','red'); }); |
結果
|
1 2 3 4 5 |
<div> <p>子要素1</p> <p><span style="color:red">子要素2</span></p> <p><em style="color:red">子要素2</em></p> </div> |
子要素1
子要素2
子要素3
find()の引数にカンマ区切りで要素を指定すると、複数の要素<span>と<em>にcssが適用されました。
contents() で要素の中のテキストを指定
contents()はchildren()と似ていますが、children()は要素を取得するのに対し、contents()は要素の中のテキストを指定することもできます。
要素の中のテキストを別のタグで囲うなんてこともcontents()ならできるのです。
基本構文
$(‘div’).contents()
要素の中のテキストを別のタグで囲うサンプル
HTML
|
1 2 3 |
<div> <p>子要素テキスト</p> </div> |
jQuery
|
1 2 3 4 5 6 |
$(function() { // <p>要素の中のテキストをcontents()で指定して<strong>タグで囲う $('p').contents().wrap('<strong />'); }); |
結果
|
1 2 3 |
<div> <p><strong>子要素テキスト</strong></p> </div> |
子要素テキスト
contents()で<p>要素の中のテキストを指定し、wrap()を使ってテキストを<strong>タグで囲いました。
children()では、要素の中のテキストを指定することはできません。
ちなみにwrapInner()でも同様の動作は可能ですが、逆に子要素のタグだけ削除する場合にも使えますね。
参考：子要素のタグのみ削除
