親要素・子要素・兄弟要素の取得
JQuery対象の要素の親要素・子要素・兄弟要素を取得する方法を解説します。親要素・子要素・兄弟要素の操作をおこなったり情報を取得したりする場合などに有効です。
親要素
対象の要素から見て上の階層にある要素(親要素)を取得します。
ひとつ上の親要素
- JQuery
- COPY
$(this).parent();
ある要素の親要素を取得する場合、parent()を使用します。parent(".class")のようにあるクラスを持った親要素に限定させることもできます。
parent()は1つ上の階層の要素の取得しかできません。2つ以上の階層の要素を取得する場合は次のすべての親要素の取得方法をご利用ください。
すべての親要素
- JQuery
- COPY
$(this).parents();
ある要素の親要素を取得する場合には、parents()を使用します。カッコ内に何も書かなければすべての親要素を取得することになります。ある特定の親要素だけを取得したい場合は、parents(".class")のようにクラスやタグを指定して利用します。
条件にあった最初の親要素
- JQuery
- COPY
$(this).closest();
条件にあった最初の親要素を取得する場合は、closest()を使います。closest(".class")というようにクラスなどの条件をつけることができ、最初に条件に一致した親要素が取得されます。条件に合う要素が複数ある場合でも最初に一致した要素が取得されます。
parents()との違いは、取得される要素はひとつだけという点です。parents()では複数の要素を取得して一括で操作をおこなったりできるのに対して、closest()は条件に一致した最初の要素のみを取得できることになります。
子要素
対象の要素から見て下の階層にある要素(子要素)を取得します。
ひとつ下の子要素
- JQuery
- COPY
$(this).children();
対象の要素の直下にある子要素の取得にはchildren()を使います。カッコ内に何も書かなければすべての直下子要素を取得でき、children(".class")のようにクラスなどを条件にして取得することもできます。
すべての子要素
- JQuery
- COPY
$(this).find();
すべての子要素の取得にはfind()を使います。カッコ内がなければ対象の要素の中にあるすべての子要素を取得できます。find(".class")のようにクラスなどを条件にした場合は、条件に一致した子要素がすべて取得されます。
兄弟要素
対象の要素と同じ階層にある要素(兄弟要素)を取得します。
前の兄弟要素
- JQuery
- COPY
$(this).prev();
前にある兄弟要素を取得するにはprev()を使います。prev(".class")のようにクラスなどを条件にして取得することができ、条件に一致する要素がない場合は取得はおこなわれません。
すべての前の兄弟要素
- JQuery
- COPY
$(this).prevAll();
前にあるすべての兄弟要素を取得するにはprevAll()を使います。カッコ内がなければすべての前にある兄弟要素を取得できます。prevAll(".class")のようにクラスなどを条件にして取得することもできます。
次の兄弟要素
- JQuery
- COPY
$(this).next();
次にある兄弟要素を取得するにはnext()を使います。next(".class")のようにクラスなどを条件にして取得することができ、条件に一致する要素がない場合は取得はおこなわれません。
すべての次の兄弟要素
- JQuery
- COPY
$(this).nextAll();
次にあるすべての兄弟要素を取得するにはnextAll()を使います。カッコ内がなければすべての次にある兄弟要素を取得できます。nextAll(".class")のようにクラスなどを条件にして取得することもできます。
組み合わせ
親要素・子要素・兄弟要素の取得は組み合わせて使うことができます。
- JQuery
//例:次の要素の子要素liの文字色を変更する
$(this).next().find('li').css('color', 'red');
ただし、parent()などを連続して使うのは、要素の構造を変えた場合などにスクリプトの変更が面倒になるため辞めたほうがいいです。