Establecer el atributo href en tiempo de ejecución

202

¿Cuál es la mejor manera de establecer el hrefatributo de la <a>etiqueta en tiempo de ejecución usando jQuery?

Además, ¿cómo se obtiene el valor del hrefatributo de la <a>etiqueta con jQuery?

javascript jquery html

— gautamlakum
fuente

378

Para obtener o establecer un atributo de un elemento HTML, puede usar la element.attr()función en jQuery.

Para obtener el atributo href , use el siguiente código:

var a_href = $('selector').attr('href');

Para establecer el atributo href , use el siguiente código:

$('selector').attr('href','http://example.com');

En ambos casos, utilice el selector apropiado. Si ha establecido la clase para el elemento de anclaje, use '.class-name'y si ha establecido la identificación para el elemento de anclaje, use '#element-id'.

— Stout Joe
fuente

1

Usé esto para obtener href. alert ($ ("# enlace-publicación"). attr ("href")); Y me dio alerta "indefinido".

— gautamlakum

3

probablemente significa que su enlace de publicación es una clase en lugar de una identificación. intente: alert ($ (". publicar-enlace"). attr ("href")); en cambio

— jim tollan

3

@ lakum4stackof: sería útil si publicas la etiqueta <a> exacta que estás usando aquí :)

ahh lo siento tienes razón. Apliqué la clase y usé '#' en el código jquery. funcionó con alert ($ (". publicar-enlace"). attr ("href")); Muchas gracias. :)

— gautamlakum

18

En jQuery 1.6+ es mejor usar:

$(selector).prop('href',"http://www...")para establecer el valor, y

$(selector).prop('href')para obtener el valor

En resumen, .propobtiene y establece valores en el objeto DOM , y .attrobtiene y establece valores en el HTML . Esto hace que sea .propun poco más rápido y posiblemente más confiable en algunos contextos.

— Gerbus
fuente

1

de acuerdo '.prop' obtendrá una ruta completa como: http: //www.../index.html mientras que .attr solo obtendrá: 'index.html'

— DevWL

14

Establezca el hrefatributo con

$(selector).attr('href', 'url_goes_here');

y léelo usando

$(selector).attr('href');

Donde "selector" es cualquier selector jQuery válido para su <a>elemento (".myClass" o "#myId" para nombrar los más simples).

Espero que esto ayude !

— Valentin Flachsel
fuente

Usé esto para obtener href. alert ($ ("# enlace-publicación"). attr ("href")); Y me dio alerta "indefinido".

— gautamlakum

@ lakum4stackof es probable que haya ejecutado ese código de alerta ANTES de configurar su hrefatributo, suponiendo que su selector sea correcto.

— Valentin Flachsel el

2

intente: alert ($ (". publicar-enlace"). attr ("href")); ya que su elemento puede ser una clase en lugar de una identificación. de hecho, probablemente use $ (this) si está dentro de su evento

— jim tollan

2

Pequeña comparación de prueba de rendimiento para tres soluciones:

$(".link").prop('href',"https://example.com")
$(".link").attr('href',"https://example.com")
document.querySelector(".link").href="https://example.com";

Aquí puede realizar la prueba usted mismo https://jsperf.com/a-href-js-change

Podemos leer los valores href de las siguientes maneras

let href = $(selector).prop('href');
let href = $(selector).attr('href');
let href = document.querySelector(".link").href;

Aquí puede realizar la prueba usted mismo https://jsperf.com/a-href-js-read

— Kamil Kiełczewski
fuente

¡Agradable! Curiosamente, estoy obteniendo resultados opuestos de ustedes, pero es interesante poder ejecutarlos yo mismo.

— HoldOffHunger

@HoldOffHunger sí, muy interesante, ¿cuál es su máquina, sistema operativo y navegador?

— Kamil Kiełczewski

1

FF59, Win10. Los resultados parecen haber cambiado ligeramente nuevamente (tal vez depende del número de pestañas abiertas), pero siguen siendo los mismos: imgur.com/a/MLDnTWM Máquina: placa de intel de 10 años (dp55wg), quad-core de 3.1 ghz, 16 gb de ddr3 ram, gtx1070.

— HoldOffHunger

1

<style>
a:hover {
    cursor:pointer;
}
</style>

<script type="text/javascript" src="lib/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $(".link").click(function(){
        var href = $(this).attr("href").split("#");
        $(".results").text(href[1]);
    })
})
</script>



<a class="link" href="#one">one</a><br />
<a class="link" href="#two">two</a><br />
<a class="link" href="#three">three</a><br />
<a class="link" href="#four">four</a><br />
<a class="link" href="#five">five</a>


<br /><br />
<div class="results"></div>

— Nanang HD
fuente

1

Las respuestas de solo código no son tan útiles como las respuestas que tienen código de trabajo más explicaciones útiles. En este caso, valdría la pena explicar esta respuesta a un niño de 5 años.

— Somnath Muluk