Problema ao pegar dados de um table usando referência por classe.

Boa noite pessoal,

Estou com o seguinte problema, tenho um botão na ultima coluna de uma table e ele serve para alterar os dados da linha. Já tenho esse código funcionando em uma pagina mas quando tento implementar em outra não roda de jeito algum, ao invés de mostrar o valor da coluna ele mostra object Object. O código é este abaixo, alguém pode me ajudar? Estou aprendendo javascript ainda..

<script>
 $(document).ready(function () {
 $(".recados").click(function () {
 var valor = $(this).parent().parent().find('.id');
 var valor1 = $(this).parent().parent().find('.recado');
 var valor2 = $(this).parent().parent().find('.maquina');
 var valor3 = $(this).parent().parent().find('.data');

 alert(valor);
 alert(valor1);
 alert(valor2);
 alert(valor3);

 });
 });
</script>

<tr>
 <td class="id"><%= recados.getId()%></td>
 <td class="maquina"><%= recados.getMaquina_desc()%></td>
 <td class="data"><%= FormataData.transformaDateUsToDateBRcomHora(recados.getData())%></td>
 <td><%= FormataData.transformaDateUsToDateBRcomHora(recados.getVisualizacao())%></td>
 <td class="recado"><%= recados.getRecado()%></td>
 <td><span class="label label-warning"><%= recados.getStatus()%></span></td>
 <td><p class="demo-button">
 <button type="button" class="btn btn-primary btn-xs recados"><i class="fa fa-pencil" aria-hidden="true"></i> Editar</button>
 <button type="button" class="btn btn-primary btn-xs"><i class="fa fa-trash" aria-hidden="true"></i> Excluir</button>
 </p></td>
</tr>