Obtener ID con JQuery de un elemento de la página

jquery

Obtener ID con JQuery: Veremos muy rápidamente en esta entrada un tip muy importante a  tener en cuenta en JQuery, este consiste en obtener el ID de un elemento del DOM, en múltiples ocasiones se hace necesario cuando imprimimos dinamismo a nuestros sitios o aplicaciones, sin mas veamos:

Obtener ID con JQuery de un elemento de la página

Para hacer el ejemplo muy fácil digamos que contamos con un párrafo con ID «2» y mostraremos un mensaje al hacer click en el para mostrar su ID

<p id="2"></p>

Podríamos de manera rápida obtener el id del párrafo con:

<script type="text/javascript">
 $(document).ready(function(){
 $("p").click(function() {
 alert($(this).attr("id"))
 });
 });
 </script>

Si nos damos cuenta obtenemos el id de nuestro párrafo, como mencioné anteriormente esta opción es muy útil cuando deseamos salvar los id que vamos generando mediante consultas a bases de datos de tablas o listas, donde no sabemos con exactitud el valor de ese ID, ya que puede variar mediante los registros mostrados.

2 comentarios

  1. Aural Recs Lanuza Contestar

    Hola… Tengo una base de datos con dos tablas llamadas actividades y notas, las notas van relacionadas con las actividades. Quiero hacer un tooltip mediante la consulta

    <?
    $cont=0;
    $busca_nota = "Select * from nota_actividades WHERE ((idproductos='$idproductos') AND (idtitulo='$idtitulo') AND (idactividad='$idactividad'))";
    $result_nota = @mysql_query($busca_nota);
    while($busqueda_nota=mysql_fetch_array($result_nota)){
    $idnota=$busqueda_nota['idnota_actividad'];
    $nota=$busqueda_nota['nota'];
    $cont++;

    echo "
    assignment

    Nota de la Actividad $actividad;
    $nota

    «;
    }
    ?>

    Lo que quiero saber es como podria enviar la variable ‘$idnota’ a mi metodo de jquery para mostrar el tooltip para que me muestre las notas de manera unica y dinamica, ya que solo me muestra la nota del id ultimo.

    el metodo es el siguiente:

    $(document).ready(function(){
    $(‘.ver_nota’).click(function(){
    var parent = $(this).parent().attr(‘id’);
    if ($(‘.tooltip_nota’).is (‘:hidden’))
    $(‘.tooltip_nota’).show();
    else
    $(‘.tooltip_nota’).hide();
    return false;
    });

    $(‘body,html’).click(function(){
    $(‘.tooltip_nota’).hide();
    });
    });

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *