obtener el id de un <a>

[MandrakeXP]

hola,

si tengo un link

<a href="#" id="codigo">texto</a>


cómopuedo obtener con javascript, jquery, ajax... el tipo id que es..


es decir, necesito tener en una variable el valor de "id"


gracias

[JavierB]

Hola MandrakeXP

Si sólo tienes un enlace, es fácil:

Código:

variable = document.getElementsByTagName('a')[0].id;

Si tienes más enlaces tendrías que cambiar el cero por el número de enlace que quieras.

Saludos,

[MandrakeXP]

Javier, el menu se genera dinamicamente de una base de datos, y no sé cuantos elementos pueden salir a nivel de javascript...

[00siete]

Ya que la página la generas dinámicamente, te recomiendo que guardes el valor del id en una variable javascript lista para ser usada en lo que quieras.

Código Javascript:

Código:

...
var miId = "codigo";
...

Código HTML:

Código:

...
<a href="#" id="codigo">texto</a>
...

[venkman]

Una cuestión... ¿En qué momento/situación/acción necesitas obtener el valor del id?

Lo digo por lo siguiente. En general, el identificador (id) de un elemento es algo único y que decides en tiempo "de creación" de la página. Es decir, que normalmente lo sabes de antemano en casi cualquier situación.

Alguna situación en la que -dependiendo de cómo lo hagas- podrías no saber el id de antemano, podría ser la de haber asociado una misma función a un evento de muchas de tus opciones de menú. Si es una situación de este tipo lo que tienes, hay una solución sencilla: Cuando asocias el evento, tienes el propio elemento, ¿no? No tienes más que sacar en ese momento el id.

[MandrakeXP]

abajo esta todo mejor dicho

[MandrakeXP]

entro en más detalle de código para que lo entendais:

tengo un menú:

<ul>
<li><a class="current" id="a_001" href="#" target="_parent">001</a></li>
<li><a id="a_002" href="#" target="_parent">002</a></li>
<li><a id="a_003" href="#" target="_parent">003</a></li>
<li><a id="a_004" href="#" target="_parent">004</a></li>
</ul>


dependiendo en qué link haga clic el usuario, se mostrará el párrafo asociado:

<div id="contenido">

<p id="001">aaaa</p>
<p id="002">bbbbbbb</p>

</div>


de momento he conseguido que al hacer clic sobre el link "001" se muestre el párrafo "001"

el problema es generalizarlo, es decir, que el sistema se haga para cualquier link.
Los links (con sus id) son generados con PHP porque vienen de una base de datos.

Este es el codigo javascript / jQuery


<script type="text/javascript">

$(document).ready(function() {

// primero escondo todos los parafos
$('#content p').hide();

// asocio al link la accion de mostrar el parrafo (u esconderlo si estaba mostrado antes)

$('div#menu ul li a#a_001').click(function() {

$('p#001').toggle('slow');
return false;
});

});

</script>

[00siete]

¿ Y no es más facil pasar el id como parámetro a la funcion de javascript de mostrar/ocultar ?
Ejemplo:

Código:

...
<li><a id="a_002" href="javascript:cambiar('002');" target="_parent">002</a></li>
<li><a id="a_003" href="javascript:cambiar('003');" target="_parent">003</a></li>
..

Luego la funcion cambiar() puede llamar a getElementById(parametro_recibido); para cambiar el estilo a visible u oculto.

[MandrakeXP]

pero mezclas html con javascript mmm y queda un poco intrusivo :(

[00siete]

Pues en mi opinión tener el <a href="#" ...> no es una buena solución, porque si la pagina es larga (tiene scroll) se va a mover para que la parte visible sea la del top.

Otra alternativa más parecido a lo que quieres es usar el evento onclick, aunque es casi igual a lo de antes:

Código:

...
<li><a id="a_002" href="#" onclick="cambiar('002');" target="_parent">002</a></li>
<li><a id="a_003" href="#" onclick="cambiar('003');" target="_parent">003</a></li>
..

[venkman]

Entiendo que el asunto está aquí:

Código:

$('div#menu ul li a#a_001').click(function() {
    $('p#001').toggle('slow');
    return false;
});

no?

Entiendo que lo que querrías hacer es "asociar los eventos todos de una sola vez"... Algo así:

Código:

$('div#menu ul li a').click(function() {
    $('p'+$(this).attr("id").slice("_")[1]).toggle('slow');
    return false;
});

¿Es esto (o algo así) lo que quieres? Lógicamente si tienes ids más complejos o con varios niveles o lo que sea, tendrás que cambiar el troceado (.slice("_")[1]) por lo que se ajuste a tus necesidades.

[venkman]

Iniciado por 00siete

Pues en mi opinión tener el <a href="#" ...> no es una buena solución, porque si la pagina es larga (tiene scroll) se va a mover para que la parte visible sea la del top.

Eso no ocurre (o no debería ocurrir) si en el onclick devuelves un false.

[00siete]

Iniciado por venkman

Eso no ocurre (o no debería ocurrir) si en el onclick devuelves un false.

Si, pero aunque yo no estoy de acuerdo, precisamente lo que no quiere MandrakeXP es que en el elemento <a> aparezca nada de Javascript porque dice que al mezclar HTML y Javascript queda "intrusivo"

[venkman]

Con el código que yo he puesto, el HTML exactamente el que ha puesto MandrakeXP, sin nada de Javascript.

Y yo sí estoy de acuerdo en que es bueno separar ambas cosas. Sólo le añadiría un detalle, que es proporcionar URLs para los casos en que Javascript no está activado.

Es decir, por un lado HTML:

Código HTML:

<ul>
<li><a class="current" id="a_001" href="/001completo.html" target="_parent">001</a></li>
<li><a id="a_002" href="/002completo.html" target="_parent">002</a></li>
<li><a id="a_003" href="/003completo.html" target="_parent">003</a></li>
<li><a id="a_004" href="/004completo.html" target="_parent">004</a></li>
</ul> 

Por otro Javascript:

Código:

$(function() {
    $('div#menu ul li a').click(function() {
        $('p'+$(this).attr("id").slice("_")[1]).toggle('slow');
        return false;
    });
});

1. No hay nada de Javascript en el HTML. Que eso es algo BUENO.
2. Hay URLs por si el Javascript no está activado.