ボタンをクリックしたらその横の要素だけ色を変えたり、ズラリと並ぶタブのうち、クリックした兄弟の要素だけ表示させたりなど$(this)と併用して使うことが多いですね。
次の要素だけでなく、前の要素や、次以降の特定の要素、自要素以外の兄弟要素など、用途によっていくつかメソッドが用意されていますので、それらを見ていきましょう。
次の要素を取得
自要素の次の要素を取得するにはnext()やnextAll()を使います。
next() で隣接している次の文字色だけ赤にする
HTML
|
1 2 3 4 5 6 |
<div class="box"> <h1>h1要素です</h1> <p>p要素です1</p> <h2>h2要素です</h2> <p>p要素です2</p> </div> |
jQuery
|
1 2 3 4 5 |
$(function() { // 自要素の次を指定 $('h1').next().css('color', '#c00'); }); |
結果
|
1 2 3 4 5 6 7 |
<div class="box"> <h1>h1要素です</h1> <!--隣のp要素にstyleが適用された--> <p sytle="color: #c00">p要素です1</p> <h2>h2要素です</h2> <p>p要素です2</p> </div> |
以下のように自要素<h1>の次の<p>要素にだけスタイルが適用され、文字色が赤になりました。
h1要素です
p要素です1
h2要素です
p要素です2
next() で指定した要素の文字色を赤にする
jQuery
|
1 2 3 4 5 |
$(function() { // nextの引数に p要素を指定 $('h1').next('p').css('color', '#c00'); }); |
結果
今度はnext()の引数に特定の要素を指定しましたが、先ほどと同様の結果になりました。
h1要素です
p要素です1
h2要素です
p要素です2
next() で指定した要素が隣接していない場合
先ほどのようにnext()で隣接していない要素を指定した場合は、何も起きません。
jQuery
|
1 2 3 4 5 |
$(function() { // nextの引数に、離れた要素を指定 $('h1').next('h2').css('color', '#c00'); }); |
結果
今度はnext()の引数に隣接していない要素を指定しましたが、何も起きませんでした。
next()はあくまでも隣接している次の要素にしか効果はありません。
h1要素です
p要素です1
h2要素ですp
要素です2
これを逆手に取って、もし隣接している要素が引数だったらという、if文のような使い方もできますね。
nextAll() で次以降の文字色を赤にする
nextAll()は隣接していないものも含め、次以降の要素を取得できます。
HTML
|
1 2 3 4 5 6 |
<div class="box"> <h1>h1要素です</h1> <p>p要素です1</p> <h2>h2要素です</h2> <p>p要素です2</p> </div> |
jQuery
|
1 2 3 4 5 |
$(function() { // 自要素の次以降を一気に取得 $('h1').nextAll().css('color', '#c00'); }); |
結果
|
1 2 3 4 5 6 7 |
<div class="box"> <h1>h1要素です</h1> <!--次以降の要素全てにstyleが適用された--> <p sytle="color: #c00">p要素です1</p> <h2 sytle="color: #c00">h2要素です</h2> <p sytle="color: #c00">p要素です3</p> </div> |
以下のように自要素<h1>の次以降の要素全部にスタイルが適用され、文字色が赤になりました。
h1要素です
p要素です1
h2要素です
p要素です2
nextAll() で指定した文字色だけ赤にする
jQuery
|
1 2 3 4 5 |
$(function() { // nextの引数に p要素を指定 $('h1').next('h2').css('color', '#c00'); }); |
結果
今度はnextAll()の引数に特定の要素を指定し、その要素だけにスタイルを適用することもできます。
隣接していなくても次以降の兄弟要素であれば、離れてても取得できるのが特長ですね。
h1要素です
p要素です1
h2要素です
p要素です2
next() の数珠つなぎをやめる
以下のようにnext()を複数使ってもnextAll()と同様の挙動になりますが、メンテナンス性も悪くなるため、隣接していない場合はnextAll()を使うようにしましょう。
|
1 2 3 4 5 |
// nextを2つ繋げると隣の隣を取得できるがメンテナンス性も悪い $('h1').next().next().css('color', '#c00'); // nextAll()の方がスマート $('h1').nextAll('h2').css('color', '#c00'); |
前の要素を取得
自要素の前の要素を取得するにはprev()やprevAll()を使います。
next()やnextAll()の反対になりますね。
prev() で隣接している前の文字色だけ赤にする
HTML
|
1 2 3 4 5 6 |
<div class="box"> <h1>h1要素です</h1> <p>p要素です1</p> <h2>h2要素です</h2> <p>p要素です2</p> </div> |
jQuery
|
1 2 3 4 5 |
$(function() { // 自要素の前を指定 $('h2').prev().css('color', '#c00'); }); |
結果
|
1 2 3 4 5 6 7 |
<div class="box"> <h1>h1要素です</h1> <!--前のp要素にstyleが適用された--> <p sytle="color: #c00">p要素です1</p> <h2>h2要素です</h2> <p>p要素です2</p> </div> |
以下のように自要素<h2>の前の<p>要素にだけスタイルが適用され、文字色が赤になりました。
h1要素です
p要素です1
h2要素です
p要素です2
prev() で指定した要素の文字色を赤にする
jQuery
|
1 2 3 4 5 |
$(function() { // prevの引数に p要素を指定 $('h2').prev('p').css('color', '#c00'); }); |
結果
今度はprev()の引数に特定の要素を指定しましたが、先ほどと同様の結果になりました。
h1要素です
p要素です1
h2要素です
p要素です2
prev() で指定した要素が隣接していない場合
next()同様にprev()で隣接していない要素を指定した場合は、何も起きません。
jQuery
|
1 2 3 4 5 |
$(function() { // prevの引数に、離れた要素を指定 $('h2').prev('h1').css('color', '#c00'); }); |
結果
今度はprev()の引数に隣接していない要素を指定しましたが、何も起きませんでした。
prev()はnext()同様、あくまでも隣接している前の要素にしか効果はありません。
h1要素です
p要素です1
h2要素です
p要素です2
prevAll() で自要素以前の文字色を赤にする
prevAll()は隣接していないものも含め、自要素以前を取得できます。
HTML
|
1 2 3 4 5 6 |
<div class="box"> <h1>h1要素です</h1> <p>p要素です1</p> <h2>h2要素です</h2> <p>p要素です2</p> </div> |
jQuery
|
1 2 3 4 5 |
$(function() { // 自要素以前を一気に取得 $('h1').prevAll().css('color', '#c00'); }); |
結果
|
1 2 3 4 5 6 7 |
<div class="box"> <!--自要素以前の要素全てにstyleが適用された--> <h1 sytle="color: #c00">h1要素です</h1> <p sytle="color: #c00">p要素です1</p> <h2>h2要素です</h2> <p>p要素です2</p> </div> |
以下のように自要素<h2>以前の全てにスタイルが適用され、文字色が赤になりました。
h1要素です
p要素です1
h2要素です
p要素です2
prevAll() で指定した文字色だけ赤にする
今度はprevAll()の引数に特定の要素を指定し、その要素だけにスタイルを適用することもできます。
nextAll()同様、隣接していなくても自要素以前の兄弟要素であれば、離れてても取得できます。
jQuery
|
1 2 3 4 5 |
$(function() { // prevAllの引数にp要素を指定 $('h2').prevAll('h1').css('color', '#c00'); }); |
結果
h1要素です
p要素です1
h2要素です
p要素です2
prev() も数珠つなぎはやめる
next()同様、以下のようにprev()を複数使ってもprevAll()と同様の挙動になりますが、メンテナンス性も悪くなるため、隣接していない場合はprevAll()を使うようにしましょう。
|
1 2 3 4 5 |
// prevを2つ繋げると2つ前を取得できるがメンテナンス性も悪い $('h2').prev().prev().css('color', '#c00'); // prevAll()の方がスマート $('h2').prevAll('h1').css('color', '#c00'); |
自分以外の兄弟要素を取得
siblings()を使えば、自要素を除く兄弟要素を取得できます。
siblings() で自要素を除く文字色を赤にする
HTML
|
1 2 3 4 5 6 |
<div class="box"> <h1>h1要素です</h1> <p>p要素です1</p> <h2>h2要素です</h2> <p>p要素です2</p> </div> |
jQuery
|
1 2 3 4 5 |
$(function() { // 自要素以外を指定 $('h2').siblings().css('color', '#c00'); }); |
結果
|
1 2 3 4 5 6 7 |
<div class="box"> <!--自要素以外にstyleが適用された--> <h1 sytle="color: #c00">h1要素です</h1> <p sytle="color: #c00">p要素です1</p> <h2>h2要素です</h2> <p sytle="color: #c00">p要素です2</p> </div> |
以下のように自要素<h2>以外の兄弟要素全てにスタイルが適用され、文字色が赤になりました。
h1要素です
p要素です1
h2要素です
p要素です2
siblings() で指定した文字色だけ赤にする
siblings()の引数に特定の要素を指定し、その要素だけにスタイルを適用することもできます。
もちろん自要素は除かれます。
HTML
|
1 2 3 4 5 6 |
<div class="box"> <h1>h1要素です</h1> <p>p要素です1</p> <p id="active">p#active要素です2</p> <p>p要素です3</p> </div> |
jQuery
|
1 2 3 4 5 |
$(function() { // siblingsの引数にp要素を指定 $('p#active').siblings('p').css('color', '#c00'); }); |
結果
h1要素です
p要素です1
p#active要素です2
p要素です3
siblings() でクリックした要素以外を赤にする
クリックしたら、そのテキスト以外の文字色を赤字にするサンプルをご紹介します。
HTML
|
1 2 3 4 5 |
<div> <p>p要素です1</p> <p>p要素です2</p> <p>p要素です3</p> </div> |
jQuery
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
$(function() { // p要素をクリックしたら発動 $('p').click(function() { // 文字色を黒にリセット $('p').css('color', '#000'); // クリックしたp要素以外を赤文字にする $(this).css('color', '#000').siblings('p').css('color', '#c00'); }); }); |
結果（動作サンプル）
テキストをクリックしてみてください。
p要素です1
p要素です2
p要素です3
上記テキストをクリックすると、クリックしたテキスト以外の文字色が変わるかと思います。
メニューボタンなどにも応用できそうですね。
