Comment obtenir une valeur du td le plus proche avec la classe au clic sur le bouton?

Question

J'ai des lignes de tableau avec des données et des boutons. http://codepen.io/leongaban/pen/nuIkd

Chaque bouton correspond à chaque ligne, également lorsque vous cliquez sur un bouton, il change les noms de classe de hide à un_hide l'étape suivante consiste à récupérer la valeur de texte du td avec la classe contact_name dans la ligne à laquelle appartient le bouton cliqué.

Structure du tableau:

<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>

En utilisant ce jQuery, il obtiendra TOUTES les valeurs de texte de .contact_name dans toutes les lignes

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

J'ai donc essayé ceci pour obtenir la valeur de texte du td .contact_name le plus proche

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

Cependant, cela revient vide pour moi :(

Comment obtiendriez-vous la valeur Nom 1 en cliquant sur le premier bouton Masquer ?

Answer 1

.contact_name n'est pas parent du bouton cliqué.

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

Answer 2

Essayer,

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

Ou

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

DÉMO

Answer 3

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