jQueryのnext()やprev()などで兄弟要素を取得

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

スポンサードリンク

ボタンをクリックしたらその横の要素だけ色を変えたり、ズラリと並ぶタブのうち、クリックした兄弟の要素だけ表示させたりなど$(this)と併用して使うことが多いですね。

次の要素だけでなく、前の要素や、次以降の特定の要素、自要素以外の兄弟要素など、用途によっていくつかメソッドが用意されていますので、それらを見ていきましょう。

次の要素を取得

自要素の次の要素を取得するにはnext()nextAll()を使います。

next() で隣接している次の文字色だけ赤にする

HTML

jQuery

結果

以下のように自要素<h1>の次の<p>要素にだけスタイルが適用され、文字色が赤になりました。

h1要素です
p要素です1
h2要素です
p要素です2

next() で指定した要素の文字色を赤にする

jQuery

結果

今度はnext()の引数に特定の要素を指定しましたが、先ほどと同様の結果になりました。

h1要素です
p要素です1
h2要素です
p要素です2

next() で指定した要素が隣接していない場合

先ほどのようにnext()で隣接していない要素を指定した場合は、何も起きません。

jQuery

結果

今度はnext()の引数に隣接していない要素を指定しましたが、何も起きませんでした。

next()はあくまでも隣接している次の要素にしか効果はありません。

h1要素です
p要素です1
h2要素ですp
要素です2

これを逆手に取って、もし隣接している要素が引数だったらという、if文のような使い方もできますね。

nextAll() で次以降の文字色を赤にする

nextAll()は隣接していないものも含め、次以降の要素を取得できます。

HTML

jQuery

結果

以下のように自要素<h1>の次以降の要素全部にスタイルが適用され、文字色が赤になりました。

h1要素です
p要素です1
h2要素です
p要素です2

nextAll() で指定した文字色だけ赤にする

jQuery

結果

今度はnextAll()の引数に特定の要素を指定し、その要素だけにスタイルを適用することもできます。

隣接していなくても次以降の兄弟要素であれば、離れてても取得できるのが特長ですね。

h1要素です
p要素です1
h2要素です
p要素です2

next() の数珠つなぎをやめる

以下のようにnext()を複数使ってもnextAll()と同様の挙動になりますが、メンテナンス性も悪くなるため、隣接していない場合はnextAll()を使うようにしましょう。

前の要素を取得

自要素の前の要素を取得するにはprev()prevAll()を使います。

next()nextAll()の反対になりますね。

prev() で隣接している前の文字色だけ赤にする

HTML

jQuery

結果

以下のように自要素<h2>の前の<p>要素にだけスタイルが適用され、文字色が赤になりました。

h1要素です
p要素です1
h2要素です
p要素です2

prev() で指定した要素の文字色を赤にする

jQuery

結果

今度はprev()の引数に特定の要素を指定しましたが、先ほどと同様の結果になりました。

h1要素です
p要素です1
h2要素です
p要素です2

prev() で指定した要素が隣接していない場合

next()同様にprev()で隣接していない要素を指定した場合は、何も起きません。

jQuery

結果

今度はprev()の引数に隣接していない要素を指定しましたが、何も起きませんでした。

prev()next()同様、あくまでも隣接している前の要素にしか効果はありません。

h1要素です
p要素です1
h2要素です
p要素です2

prevAll() で自要素以前の文字色を赤にする

prevAll()は隣接していないものも含め、自要素以前を取得できます。

HTML

jQuery

結果

以下のように自要素<h2>以前の全てにスタイルが適用され、文字色が赤になりました。

h1要素です
p要素です1
h2要素です
p要素です2

prevAll() で指定した文字色だけ赤にする

今度はprevAll()の引数に特定の要素を指定し、その要素だけにスタイルを適用することもできます。

nextAll()同様、隣接していなくても自要素以前の兄弟要素であれば、離れてても取得できます。

jQuery

結果

h1要素です
p要素です1
h2要素です
p要素です2

prev() も数珠つなぎはやめる

next()同様、以下のようにprev()を複数使ってもprevAll()と同様の挙動になりますが、メンテナンス性も悪くなるため、隣接していない場合はprevAll()を使うようにしましょう。

自分以外の兄弟要素を取得

siblings()を使えば、自要素を除く兄弟要素を取得できます。

siblings() で自要素を除く文字色を赤にする

HTML

jQuery

結果

以下のように自要素<h2>以外の兄弟要素全てにスタイルが適用され、文字色が赤になりました。

h1要素です
p要素です1
h2要素です
p要素です2

siblings() で指定した文字色だけ赤にする

siblings()の引数に特定の要素を指定し、その要素だけにスタイルを適用することもできます。

もちろん自要素は除かれます。

HTML

jQuery

結果

h1要素です
p要素です1
p#active要素です2
p要素です3

siblings() でクリックした要素以外を赤にする

クリックしたら、そのテキスト以外の文字色を赤字にするサンプルをご紹介します。

HTML

jQuery

結果(動作サンプル)

テキストをクリックしてみてください。

p要素です1
p要素です2
p要素です3

上記テキストをクリックすると、クリックしたテキスト以外の文字色が変わるかと思います。

メニューボタンなどにも応用できそうですね。

スポンサードリンク

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

コメントを残す

*