clickした要素のdata属性値がうまく取得できない。

Question

//html
<div>
 <div class="foo">
  <input data-id="a">
 </div>
 <div class="foo">
  <input data-id="b">
 </div>
 <div class="foo">
  <input data-id="c">
 </div>
</div>

//javascript(jQuery)
$('.foo ').click(function() {
 const i = $('.foo input').data('id')
 console.log(i)
})

//出力結果
a //foo > input(data-id="a")を押した時
a //foo > input(data-id="b")を押した時
a //foo > input(data-id="c")を押した時

//期待する出力結果
a //foo > input(data-id="a")を押した時
b //foo > input(data-id="b")を押した時
c //foo > input(data-id="c")を押した時

fooをクリックした際に、クリックされたfoo要素のinputにあるdata属性を取得したいのですが、
出力結果のように、どのfooを押してもaの値しか返ってきません。
これの理由がわからないので、ご教授いただきたいです。
よろしくお願いします。

Comments

[kei344]

（質問文は編集できます）提示のHTMLが正しくないのでそもそも値すら取れません。修正願います。

[hosodaaaaa]

失礼しました、inputの属性部分を修正しました。
ご指摘ありがとうございます。

Answer 1

Event.currentTarget

$('.foo ').click(function(e) {
 const i = $(e.currentTarget).find('input').data('id')
 console.log(i)
})

Comments

[hosodaaaaa]

回答していただきありがとうございます。

currentTargetの存在を忘れていました。
こちらでも解決出来ました。

Answer 2

「クリックした要素」がスクリプトで表現できてないからですね。
const i = $('input', this).data('id')
でどうでしょう。

修正: クラス名が付いているのは親だった。

Comments

[m.ts10806]

.foo　にdata属性ついてないですよ

[Daregada]

失礼。修正しました。

[hosodaaaaa]

回答していただきありがとうございます。
無事解決出来ました。

Answer 3

  $('.foo ').click(function() {
// const i = $('foo input').data('id') // 「foo」という要素はHTMLに無いのでそもそも採れない
//                   ↓
   const i = $('input',this).data('id')
   console.log(i)
  })

【jQuery() | jQuery API Documentation】
https://api.jquery.com/jQuery/#jQuery-selector-context

Comments

[kei344]

https://teratail.com/questions/history-questions/272382

[hosodaaaaa]

回答頂きありがとうございます。
> const i = $('input',this).data('id')

上記のコードで試したところ、undefinedが返ってきました。
> const i = $('input').data('id')
こちらで試したのですが、これだと
出力結果↓
(n回)a
と表示されるのですが、なぜでしょうか。

[kei344]

https://jsfiddle.net/j7w8kzhn/

[hosodaaaaa]

ありがとうございます。
自分のソースを見返してみます。

[hosodaaaaa]

解決しました、ありがとうございます。