【jQuery】onclickを指定したボタンの親要素のidを取得したい

Question

よろしくお願いします。

jQueryを利用して、押されたボタンの親要素のidを取得したいです。

<div id="data001">
 <button class="btn1" value="1" onclick="btn1()"></button>
 <button class="btn2" value="2" onclick="btn2()"></button>
</div>
<div id="Data002">
 <button class="btn1" value="1" onclick="btn1()"></button>
 <button class="btn2" value="2" onclick="btn2()"></button>
</div>

function btn1(){
 var oya_id = $(this).parent('div').attr('id');
 alert(oya_id);
}

結果はundefinedとなります。

001も002も中身はまったく同じものになります。
divの数は不定です。(状況により変動します。)
この状態で、「001のbtn1が押された時」に「001」を取得したいです。

onclickに同じ名前を付けているのがいけないのかと思い代替案を調べましたが
見つけることが出来ませんでした。

どのようにしたら親要素のidを取得できるでしょうか？

Answer 1

http://jsdo.it/katoy/u3ls に書いてみました。

jquery らしくするため、 onlick での呼び出しでなく、クリックに対するイベントメソッドを定義して処理しました。

html

<div id="001">
 <button class="btn1" value="1" >A</button>
 <button class="btn2" value="2" >B</button>
</div>
<div id="002">
 <button class="btn1" value="1" >C</button>
 <button class="btn2" value="2" >D</button>
</div>

javascript

$(function() {
  $('.btn1').click(function(e) {
     var oya_id = $(this).parent('div').attr('id');
     alert("jquery " + oya_id);
  });
});

onclick=... で書きたいなら、 onclick=btn1(this) のように this を渡して、btn1() 中では、この this をつかって処理してくことが必要です。
(this を渡していないのが、元の質問でメソッドが動作しなかったことの根本原因です。
興味があれば、その方法にも挑戦してみても良いとおもいます。)

参考：

• jQuery逆引きリファレンス イベントに応じて処理を実行するには？http://www.buildinsider.net/web/jqueryref/015

Comments

[退会済みユーザー]

ありがとうございます。
無事、目的の結果を出せるようになりました。

onclickの方法も試してみましたがこちらはよく分からなかったので、勉強し直したいと思います。

Answer 2

HTMLのIDは、数字から始めることはできません（参考）。

Comments

[退会済みユーザー]

ありがとうございます。
idを001からdata001に変更しました。
なお結果に変化はありません。