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

Question

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

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

<span class="btn-anwr">ボタン</span>

------------

<table>
<caption><span class="year">2020</span>年<span class="month">05</span>月</span>
<tbody>
<tr>
<th><th>月</th><th>火</th><th>水</th></th>
<td><div>aaa</div></td>
<td><div>bbb</div></td>
<td><div>ccc</div></td>
<td><div>ddd</div></td>
</tr>
</tbody>
</table>

$(function(){
    $('table td div').on('click', function(){
        var text01 = $(this).text();
        var text02 = $(this).parents('caption').text();

        $('.btn-anwr').text(text02 + text01);
    });
});

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

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

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

Comments

[Daregada]

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

[Yui_note]

アドバイスありがとうございます。

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

Answer 1

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

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

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

Comments

[Yui_note]

アドバイスありがとうございます！

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

本当にありがとうございました。m

Answer 2

captionが直接の親に無いからです。
直近のtableからfindで探しましょう。

【jQueryで親要素を取得する：parent(), parents(), closest() | UX MILK】
https://uxmilk.jp/8150

Comments

[Yui_note]

いつもアドバイスありがとうございます。

caption要素の取得方法について、初めて知りました。。
まずは親を取得してから探すんですね。
新たな知識が増えました。

すみません、ありがとうございました。m