jQueryで個別のidを読み込みことが出来ない

お世話になっております。
jQueryを使ってインスタンス変数であるchild.idを取得したいのですが、上手くいきません。

現状をお伝えします。

haml
1.namecard
2  .card{ type: 'button' }
3    %input{ class: 'child_id', type: 'hidden', value: child.id }
4      = child.id

viewはこのように表示されています。

左上にあるのはchild.idとなり、この番号を取得したいです。
この枠内をクリックすることによって下記のjQueryが発火します。
child.js

js
1$('.card').on('click', function(){
2  console.log($('.child_id').val());
3});

こちらでchild.idを取得することはできているのですが、本来、各カードに対応したidが取得できると想定したのですが、
どこを押しても1しか取得することができません。
対応した、child.idを取得したいです。

jsを読み込ませるタイミングが悪いのかと思い、いろんなファイルで読み込ませてみたのですが、変わらず１だけでした。。。

なお、このhamlファイルは上層のhtmlにて

haml
1= render partial: 'trusts/child', collection: children

で読み込んでおります。
ご回答よろしくおねがいいたします。

ご参考

出力するファイル全てです。

haml
1.row
2  .col-7
3    = render partial: 'trusts/child', collection: children
4
5= javascript_include_tag 'child.js'
6

↓

haml
1= render partial: 'trusts/namecard', locals: { child: child }

↓
(当該ファイル)

haml
1.namecard
2  .card{ type: 'button' }
3    %input{ class: 'child_id', type: 'hidden', value: child.id }
4      = child.id
5    .card-body
6      .card-title
7      %ul
8        %li.card-column 名前
9        %li.card-column 生年月日
10        %li.card-column 年齢

html
1
2<!DOCTYPE html>
3<html>
4~
5<body>
6
7~
8
9<div class='namecard'>
10<div class='card' type='button'>
11<input class='child_id' type='hidden' value='1'>
121
13</input>
14<div class='card-body'>
15<div class='card-title'></div>
16<ul>
17<li class='card-column'>名前</li>
18<li class='card-content'>開 発太郎</li>
19<li class='card-column'>生年月日</li>
20<li class='card-content'>1987年4月21日</li>
21<li class='card-column'>年齢</li>
22<li class='card-content'>34</li>
23</ul>
24</div>
25</div>
26</div>
27
28<div class='namecard'>
29<div class='card' type='button'>
30<input class='child' type='hidden' value='2'>
312
32</input>
33<div class='card-body'>
34<div class='card-title'></div>
35<ul>
36<li class='card-column'>名前</li>
37<li class='card-content'>開 次郎</li>
38<li class='card-column'>生年月日</li>
39<li class='card-content'>-</li>
40<li class='card-column'>年齢</li>
41<li class='card-content'>-</li>
42</ul>
43</div>
44</div>
45</div>
46
47<div class='namecard'>
48<div class='card' type='button'>
49<input class='child_id' type='hidden' value='3'>
503
51</input>
52<div class='card-body'>
53<div class='card-title'></div>
54<ul>
55<li class='card-column'>名前</li>
56<li class='card-content'>ほげ へご</li>
57<li class='card-column'>生年月日</li>
58<li class='card-content'>1990年12月22日</li>
59<li class='card-column'>年齢</li>
60<li class='card-content'>30</li>
61</ul>
62</div>
63</div>
64</div>
65~

kei344

2021/05/01 10:33

（質問文は編集できます）hamlを出力したHTMLを提示されることをお勧めします。

tarotarotarotar

2021/05/01 10:39

ありがとうございます。更新させていただきました。

m.ts10806

2021/05/01 10:50 編集

おそらくkei344さんの意図した内容になっていません。ブラウザに表示したときに「ソースを表示」で得られる「HTML」を提示してください。要はコンパイル後のコードです。

tarotarotarotar

2021/05/01 13:40

申し訳ございません。再度アップさせていただきました。

行動規範の内容に同意します

回答1件

ベストアンサー

JavaScript
1$('.card').on('click', function(){
2  console.log($('.child_id',this).val());
3  // or console.log($(this).find('.child_id',).val());
4});
5```**動くサンプル：**[https://jsfiddle.net/a4bdp68L/](https://jsfiddle.net/a4bdp68L/)