Sacar ID de un elemento que está antes con JQuery

publicado por: Anonymous

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.

solución

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:

_x000D_

_x000D_

$('input[id^="show_message"]').click(function() {_x000D_
  alert($(this).parent('td').prev().children('span').attr('id'));_x000D_
});

_x000D_

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<table>_x000D_
  <tr>_x000D_
    <td id="ini_name1">_x000D_
      <span id="spanid1">span ejemplo</span>_x000D_
    </td>_x000D_
    <td>_x000D_
      <input id="show_message1" class="btn btn-primary" type="button" value="Show">_x000D_
    </td>_x000D_
  </tr>_x000D_
  <tr>_x000D_
    <td id="ini_name2">_x000D_
      <span id="spanid2">span ejemplo</span>_x000D_
    </td>_x000D_
    <td>_x000D_
      <input id="show_message2" class="btn btn-primary" type="button" value="Show">_x000D_
    </td>_x000D_
  </tr>_x000D_
  <tr>_x000D_
    <td id="ini_name3">_x000D_
      <span id="spanid3">span ejemplo</span>_x000D_
    </td>_x000D_
    <td>_x000D_
      <input id="show_message3" class="btn btn-primary" type="button" value="Show">_x000D_
    </td>_x000D_
  </tr>_x000D_
</table>

_x000D_

_x000D_

_x000D_

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

_x000D_

_x000D_

$('.show_message').click(function() {_x000D_
  alert($(this).parent('td').prev().children('span').attr('id'));_x000D_
});

_x000D_

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<table>_x000D_
  <tr>_x000D_
    <td class="ini_name">_x000D_
      <span id="spanid1">span ejemplo</span>_x000D_
    </td>_x000D_
    <td>_x000D_
      <input class="show_message" class="btn btn-primary" type="button" value="Show">_x000D_
    </td>_x000D_
  </tr>_x000D_
  <tr>_x000D_
    <td class="ini_name">_x000D_
      <span id="spanid2">span ejemplo</span>_x000D_
    </td>_x000D_
    <td>_x000D_
      <input class="show_message" class="btn btn-primary" type="button" value="Show">_x000D_
    </td>_x000D_
  </tr>_x000D_
  <tr>_x000D_
    <td class="ini_name">_x000D_
      <span id="spanid3">span ejemplo</span>_x000D_
    </td>_x000D_
    <td>_x000D_
      <input class="show_message" class="btn btn-primary" type="button" value="Show">_x000D_
    </td>_x000D_
  </tr>_x000D_
</table>

_x000D_

_x000D_

_x000D_

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *