0

Vereis, quiero hacer que cuando clicken el botón con id="show_message", muestre el id del elemento span que está dentro del elemento td.

Code de la página: introducir la descripción de la imagen aquí

Code Jquery:

$('#show_message').click(function () {
   alert($(this).find('#ini_name').children('span').attr('id'));
});

He probado también con parent en vez de find para descarta, y nada.

6
  • mejora tu pregunta porfavor, no entiendo que está por encima: ? el 17 ene. 2018 a las 19:49
  • Está bien, la editaré para dejar más claro lo que pretendo hacer, sorry. el 17 ene. 2018 a las 19:50
  • 1
    era preferible cuando era texto y no la imagen
    – Rene Limon
    el 17 ene. 2018 a las 20:28
  • Era para enfatizar sobre que hay mas elementos td entre el boton y el td con id ini_name. el 17 ene. 2018 a las 20:30
  • Creo que lo que tienes es un problema de organización o de lógica en el código. ¿Eso es un formulario, una tabla, o qué es? Si organizaras mejor (con formularios, con clases...), podrías acceder más fácil a los elementos, sin tener que dar tantas vueltas.
    – A. Cedano
    el 17 ene. 2018 a las 22:04

2 respuestas 2

1

El error al utilizar find es que la función busca entre los descendientes del elemento en donde se le indica, en tu caso lo estaba haciendo desde el input, nunca lo encontrará como descendiente suyo. Hice un ejemplo para que veas cómo acceso al id que deseas, el único truco es navegar correctamente entre los elementos:

$('input[id^="show_message"]').click(function() {
  alert($(this).parent('td').prev().children('span').attr('id'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td id="ini_name1">
      <span id="spanid1">span ejemplo</span>
    </td>
    <td>
      <input id="show_message1" class="btn btn-primary" type="button" value="Show">
    </td>
  </tr>
  <tr>
    <td id="ini_name2">
      <span id="spanid2">span ejemplo</span>
    </td>
    <td>
      <input id="show_message2" class="btn btn-primary" type="button" value="Show">
    </td>
  </tr>
  <tr>
    <td id="ini_name3">
      <span id="spanid3">span ejemplo</span>
    </td>
    <td>
      <input id="show_message3" class="btn btn-primary" type="button" value="Show">
    </td>
  </tr>
</table>

Por otro lado, para lo que necesitas es más comodo trabajar con clases en lugar de ids:

$('.show_message').click(function() {
  alert($(this).parent('td').prev().children('span').attr('id'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td class="ini_name">
      <span id="spanid1">span ejemplo</span>
    </td>
    <td>
      <input class="show_message" class="btn btn-primary" type="button" value="Show">
    </td>
  </tr>
  <tr>
    <td class="ini_name">
      <span id="spanid2">span ejemplo</span>
    </td>
    <td>
      <input class="show_message" class="btn btn-primary" type="button" value="Show">
    </td>
  </tr>
  <tr>
    <td class="ini_name">
      <span id="spanid3">span ejemplo</span>
    </td>
    <td>
      <input class="show_message" class="btn btn-primary" type="button" value="Show">
    </td>
  </tr>
</table>

8
  • Lo he probado, pero cuando lo ejecuto me sale "undefined". Comentarte de que no hay solo 2 td sino varios, así que he tratado de editar tu code para adaptarlo: alert($(this).parent('td').prev().find('#ini_name').children('span').attr('id')); el 17 ene. 2018 a las 20:22
  • He editado mi respuesta para que veas que funciona aunque los ids varien, la causa por la que podría no funcionarte es que en tu código original tienes errores con las comillas en los ids
    – Rene Limon
    el 17 ene. 2018 a las 20:27
  • Pero piensa que solo hay un botón, con tu Jquery cada botón apunta al td anterior y así sí que lo puedes sacar, la cosa és que solo tiene que haber uno. el 17 ene. 2018 a las 20:32
  • mmm.. ¿solo un boton? Pero, si solo hay un boton y multiples spans ¿cual span es el que se va a mostrar entonces? ¿El ultimo?
    – Rene Limon
    el 17 ene. 2018 a las 20:37
  • Con Jquery la idea es que viaje al span con el id=ini_name y extraiga el id del span que tiene. Yo sigo intentando pero solo recibo "undefined" como output del alert. el 17 ene. 2018 a las 20:39
0

Te aconsejo que leas y sobretodo entiendas la documentación de Jquery.

También que escribas código html bien formado porque si no lo está el DOM no estará completo y fallará javascript.

Para el código que pones sería algo así:

 $("#show_message").click( function()
 {
    alert($('#ini_name span').attr('id'));
 });

Puedes ver un ejemplo completo aqui. http://tpcg.io/0pGOA2

1
  • stackoverflow cuenta con su propio editor de snippets
    – Rene Limon
    el 17 ene. 2018 a las 20:20

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.