jQueryでのテキスト取得について

Question

<table>
<tr>
<th>文章</th>
<th>ボタン</th>
</tr>

<tr>
<td>玉ねぎ</td>
<td><button class="hogebutton">ボタン1</button></td>
</tr>

<tr>
<td>牛肉</td>
<td><button class="hogebutton">ボタン2</button></td>
</tr>

<tr>
<td>にんじん</td>
<td><button class="hogebutton">ボタン3</button></td>
</tr>

<tr>
<td>じゃがいも</td>
<td><button class="hogebutton">ボタン4</button></td>
</tr>

</table>

このようなテーブルがあったときにボタンをクリックしたら同列のテキストが取得できるようなjQueryが書きたいのですがわからず困っています。

例)ボタン1をクリックで得られる結果は「玉ねぎ」

jQueryのparentなどを使って取得しようとしてみたのですがうまくいかず困っています…

スマホからの投稿にてコードのインデントなどがめちゃくちゃなのはお許しください。

Comments

[kei344]

ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。

[kinisinai]

ご指摘ありがとうございます。
次からは具体的に書くよう心がけます。

Answer 1

ボタンの親要素(parent)の前の要素(prev)のテキストを取得すると考えればいいでしょう。

$(function(){
  $('.hogebutton').on('click', function() {
    var result = $(this).parent().prev().text();
    console.log(result);
  });
});

Comments

[kinisinai]

ありがとうございます。期待通りの結果を得れました。