javascriptで押された場所の一番上のタグのidを変数として取得したい

Question

<div id="a"><div/>
<div id="b"><div/>
<div id="c">
 <div id="c1">
  <input type="button" id="c1button" />
 </div>
<div/>

というタグ構成があり、jQueryで"c1button"ボタンが押された場合一番上のdivタグ"c"のidの変数（この場合はc）を下記のように変数として取得するにはどうすればよいでしょうか？

 //#coffeescriptで記述
 $ ->
  $(document).click, "c1button",->
   tmp = htmlで取得したid
   console.log(tmp) // = c

Answer 1

console.log($(this).closest('div').attr('id'));
で、いかがですか。
単に親が欲しいなら、$(this).parent() でも・・

Answer 2

n個上のdivの拾い方を追記しておきました

<script>
$(function(){
  $('#c1button').on('click',function(){
    console.log($(this).parents('div').first().prop('id'));//直近
    console.log($(this).parents('div').children().eq(2).prop('id'));//2個上
    console.log($(this).parents('div').children().eq(3).prop('id'));//3個上
    console.log($(this).parents('div').last().prop('id'));//最遠
  });
});
</script>
<div id="a"></div>
<div id="b"></div>
<div id="c">
<div id="c1">
<div id="c2">
<div id="c3">
<input type="button" id="c1button" />
</div>
</div>
</div>
</div>

Comments

[VerfolgungEin]

ありがとうございました、このコードでfirst-childやnth-child(x)のような書き方は出来るのでしょうか？

[VerfolgungEin]

ありがとうございました！

[yambejp]

上位へ遡っていく場合も追記修正しておきました

Answer 3

• 思いっきり SyntaxError になってますが、このコードは JavaScript なんでしょうか。
  アロー関数にしてもおかしい気がしますが…。
• HTMLの <div/> (空要素) も変ですね。XHTMLだとすると終了タグがありません。

諸々を修正したとして。

'use strict';
jQuery(document).on('click', '#c1button', (event) => {
  console.log(event.currentTarget.parentNode.parentNode.id);
});

Re: VerfolgungEin さん

Answer 4

$('#c1button').click(function () {
  console.log($(this).closest('div').attr('id'));
});

直近の親要素であるdivのidを取得する