jQueryで先祖要素のテキストを取得したい

jQueryを使用して、先祖要素の中に表示されているテキストを取得したいのですが、
うまく取得ができません。

試してみたコードは以下になります。

HTML
1<span class="btn-anwr">ボタン</span>
2
3------------
4
5<table>
6<caption><span class="year">2020</span>年<span class="month">05</span>月</span>
7<tbody>
8<tr>
9<th><th>月</th><th>火</th><th>水</th></th>
10<td><div>aaa</div></td>
11<td><div>bbb</div></td>
12<td><div>ccc</div></td>
13<td><div>ddd</div></td>
14</tr>
15</tbody>
16</table>

jQeury
1$(function(){
2    $('table td div').on('click', function(){
3        var text01 = $(this).text();
4        var text02 = $(this).parents('caption').text();
5
6        $('.btn-anwr').text(text02 + text01);
7    });
8});

取得したいテキストの形：2020年05月aaa

上記の様な形でテキストを取得をしたいのですが、
text01の値は取得されますが、text02の方のテキストが取得されず、
原因がわからない状態です。

何かお分かりの方がいらっしゃいましたら、アドバイスいただけますと幸いです。
どうぞよろしくお願いいたします。

Daregada

2020/09/01 01:50 編集

HTMLファイルに記載されたtable要素の内容がおかしいのですが。 (1) 3つのth要素を囲むように書かれたth要素(tr要素の誤り?) (2) th要素が3つなのに、td要素が4つ (3) caption要素の終了タグの代わりにspan要素の終了タグが書かれている

Yui_note

2020/09/01 02:30

アドバイスありがとうございます。確かに、HTMLの書き方に間違いがございました。失礼いたしました。ご指摘ありがとうございました。

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

回答2件

ベストアンサー

クリックされたdiv要素のparentsは、(フィルターを指定しないと) td, tr, tbody, table, body, html で、caption要素は含まれません。

目的のcaption要素は、上記のparentsに含まれるtable要素の子要素ですから、(他の回答者の方が書かれているように)parentsをtable要素でフィルターして、findでcaption要素を探してください。

Javascript
1var text02 = $(this).parents('table').find('caption').text();

投稿2020/09/01 02:04

Daregada

総合スコア11990

Yui_note

2020/09/01 02:28

アドバイスありがとうございます！ caption要素が、parentsに含まれるtable要素の子要素なので、始めにtableでフィルターしてからfindで探す、という所が目から鱗でした。そうゆうことになってるんですね。。調べていた限りではこうゆうことは情報として出てこなかったので、ご質問してよかったです。。やりたいことも実装できました。本当にありがとうございました。m

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