[jQuery] 親要素のID値を取得する

関数の引数をなるべく少なくする為にコードを改良していたところ、thisの親の親の親のIDを取得する必要が出てきました。

親要素はparent()で取得できます。ということで、親の親の親はparent()を3回呼び出せば取得できるわけです。

HTML

<div id="parent3">
  <span id="parent2">
    <span id="parent1">
      <span id="target"></span>
    </span>
  </span>
</div>

jQuery

$(function(){
  alert($('#target').parent().attr('id')); //parent1と表示
  alert($('#target').parent().parent().attr('id'));  //parent2と表示
  alert($('#target').parent().parent().parent().attr('id'));  //parent3と表示
});

attr('id')で取得できるIDは値のみでシャープ(#)が付いていないので、取得して利用する場合はシャープ(#)の付け忘れに注意です。

parent()を何回もする他に、parents()で親要素を全て取得して引数で要素を指定する方法もあります。上記のHTMLでdiv要素の親を選択するには以下のようになります。

parents()の例

$(function(){
  alert($('#target').parents('div').attr('id')); //parent3と表示される
});

parent()を使うかparents()を使うかは適材適所で使い分けです。