親要素・子要素・兄弟要素の取得

ひとつ上の親要素

$(this).parent();

ある要素の親要素を取得する場合、parent()を使用します。parent(".class")のようにあるクラスを持った親要素に限定させることもできます。

parent()は１つ上の階層の要素の取得しかできません。２つ以上の階層の要素を取得する場合は次のすべての親要素の取得方法をご利用ください。

すべての親要素

$(this).parents();

ある要素の親要素を取得する場合には、parents()を使用します。カッコ内に何も書かなければすべての親要素を取得することになります。ある特定の親要素だけを取得したい場合は、parents(".class")のようにクラスやタグを指定して利用します。

条件にあった最初の親要素

$(this).closest();

条件にあった最初の親要素を取得する場合は、closest()を使います。closest(".class")というようにクラスなどの条件をつけることができ、最初に条件に一致した親要素が取得されます。条件に合う要素が複数ある場合でも最初に一致した要素が取得されます。

parents()との違いは、取得される要素はひとつだけという点です。parents()では複数の要素を取得して一括で操作をおこなったりできるのに対して、closest()は条件に一致した最初の要素のみを取得できることになります。

ひとつ下の子要素

$(this).children();

対象の要素の直下にある子要素の取得にはchildren()を使います。カッコ内に何も書かなければすべての直下子要素を取得でき、children(".class")のようにクラスなどを条件にして取得することもできます。

すべての子要素

$(this).find();

すべての子要素の取得にはfind()を使います。カッコ内がなければ対象の要素の中にあるすべての子要素を取得できます。find(".class")のようにクラスなどを条件にした場合は、条件に一致した子要素がすべて取得されます。

前の兄弟要素

$(this).prev();

前にある兄弟要素を取得するにはprev()を使います。prev(".class")のようにクラスなどを条件にして取得することができ、条件に一致する要素がない場合は取得はおこなわれません。

すべての前の兄弟要素

$(this).prevAll();

前にあるすべての兄弟要素を取得するにはprevAll()を使います。カッコ内がなければすべての前にある兄弟要素を取得できます。prevAll(".class")のようにクラスなどを条件にして取得することもできます。

次の兄弟要素

$(this).next();

次にある兄弟要素を取得するにはnext()を使います。next(".class")のようにクラスなどを条件にして取得することができ、条件に一致する要素がない場合は取得はおこなわれません。

すべての次の兄弟要素

$(this).nextAll();

次にあるすべての兄弟要素を取得するにはnextAll()を使います。カッコ内がなければすべての次にある兄弟要素を取得できます。nextAll(".class")のようにクラスなどを条件にして取得することもできます。