ボタンをクリックしたときにクラスに最も近いtdの値を取得するにはどうすればよいですか？

Question

データとボタンを含むテーブル行があります。 http://codepen.io/leongaban/pen/nuIkd

各ボタンは各行に対応し、ボタンをクリックすると、クラス名がhideからun_hideに変更されます。次のステップは、クラスcontact_nameでtdのテキスト値を取得することですクリックされたボタンが属する行も。

テーブル構造：

<tr>
  <td class="contact_name" style="padding: 7px 0;">
    Name 1
  </td>
  <td>
      <button class="btn_hide">Hide</button>
  </td>
</tr>
<tr>
  <td class="contact_name" style="padding: 7px 0;">
      Name 2
  </td>
  <td>
      <button class="btn_hide">Hide</button>
  </td>
</tr>

このjQueryを使用して、すべての行で.contact_nameのすべてのテキスト値を取得します

var name = $('.contact_name').text();

だから私はこれを試して 'closest' .contact_name tdのテキスト値を取得しました

var name = $(this).closest('.contact_name').text();

しかし、それは私のために空白を返します:(

最初の非表示ボタンをクリックして、Name 1値をどのように取得しますか？ ？

Answer 1

.contact_nameは、クリックされたボタンの親ではありません。

var name = $(this).closest('tr').find('.contact_name').text();

Answer 2

試して、

var name = $(this).closest('td').prev('.contact_name').text();

または

var name = $(this).closest('tr').find('.contact_name').text();

[〜＃〜] demo [〜＃〜]

Answer 3

var name = $(this).closest('tr').children('.contact_name').text();