jQueryで$(this)の親要素・子要素・隣接要素を指定する方法

jQueryには、イベントが発生した要素を指定するための$(this)というものがあります。

例えば、以下のようなスクリプトがあったとします。

$(function() {
  $('p').click(function() {
    $(this).css('color', 'red');
  });
});

この場合、$(this)はp要素になりますので、p要素をクリックした時にp要素の色が赤に変わります。それだったら、以下のようにしても同じじゃないかと思いますね。

$(function() {
  $('p').click(function() {
    $('p').css('color', 'red');
  });
});

しかし、これだとp要素が複数箇所にあった場合、すべてのp要素の色が変わってしまいます。$(this)をうまく活用することで、他の要素に影響が及ぶのを防いでくれます。

また、単純にイベントが起こった要素を指定するのであれば、$(this)を使えば良いですが、イベントが発生した要素から見て、親要素や子要素、または隣接する要素に何かアクションを起こしたいこともあるかと思います。

そんな時のために、jQueryで$(this)の親要素・子要素・隣接要素を指定する方法をご紹介したいと思います。

jQueryで$(this)の親要素・子要素・隣接要素を指定する方法

親要素を指定する

イベントが発生した要素の親要素を指定する場合は、「$(this).parent()」で指定します。先ほどの例でいうと、以下のようになります。

$(function() {
  $('p').click(function() {
    $(this).parent().css('color', 'red');
  });
});

上記だと直前の親要素しか指定できませんが、parentsを使ってクラスや要素を指定すると、先祖の要素まで遡って指定することができます。この場合、クリックしたp要素より上の階層に.parent-classがあれば、色が赤に変わります。

$(function() {
  $('p').click(function() {
    $(this).parents('.parent-class').css('color', 'red');
  });
});

また、直近の親要素を指定する場合は、closestを使います。以下のようにすると、p要素から先祖を遡りながら.parent-classを持つ要素を探して、直近の.parent-classが赤色に変わります。parentsに似ていますが、parentsは先祖となる要素内の.parent-classすべてが対象になるのに対して、closestは直近の.parent-classのみが対象になります。

$(function() {
  $('p').click(function() {
    $(this).closest('.parent-class').css('color', 'red');
  });
})

子要素を指定する

子要素を指定する場合は、「$(this).children()」を使って指定します。

$(function() {
  $('p').click(function() {
    $(this).children().css('color', 'red');
  });
});

子要素ではなく、孫要素を指定したい場合は「$(this).find()」を使用します。

$(function() {
  $('p').click(function() {
    $(this).find('.child-class').css('color', 'red');
  });
});

この場合、クリックしたp要素より下の階層に.child-classがあれば、色が赤に変わります。

隣接する要素を指定する

隣接する要素を指定する場合は、「$(this).next()」もしくは「$(this).prev()」を使います。

$(function() {
  $('p').click(function() {
    $(this).next().css('color', 'red');
  });
});

$(function() {
  $('p').click(function() {
    $(this).prev().css('color', 'red');
  });
});

以降にある要素すべてを指定する場合は、「$(this).nextAll()」もしくは「$(this).prevAll()」を使って指定します。

$(function() {
  $('p').click(function() {
    $(this).nextAll('span').css('color', 'red');
  });
});

$(function() {
  $('p').click(function() {
    $(this).prevAll('span').css('color', 'red');
  });
});

この場合、クリックしたp要素の次もしくは前以降すべてのspanが赤色に変わります。

あとがき

はじめは$(this)って何なんだ！？という感じでしたが、jQueryで何かしらを実装する際は必須で使うと言っても過言ではありません。

$(this)は様々な場面で使いますので、ぜひこの機会に覚えてみてください。