¿Cómo actualizar (agregar a) un href en jquery?


79

Tengo una lista de enlaces que van todos a una API de Google Maps.

los enlaces ya tienen el daddrparámetro (destino) como estático. Estoy usando Geo-Location para encontrar la posición de los usuarios y quiero agregar la saddr(dirección de origen) a los enlaces una vez que obtenga los datos.

así que básicamente tendré que agregar algo como &saddr=50.1234567,-50.03452al final de todos los enlaces que apuntan a mapas de Google

Todos los enlaces tienen una clase llamada directions-link

y desde esta página he descubierto cómo cambiarlos:

$("a.directions-link").attr("href", "http://www.google.com/");

Sin embargo, solo quiero agregar mi valor al final del href sin cambiar lo que ya es el href.

¿Cómo puedo hacer eso?

Respuestas:


149
var _href = $("a.directions-link").attr("href");
$("a.directions-link").attr("href", _href + '&saddr=50.1234567,-50.03452');

Para hacer un bucle con each()

$("a.directions-link").each(function() {
   var $this = $(this);       
   var _href = $this.attr("href"); 
   $this.attr("href", _href + '&saddr=50.1234567,-50.03452');
});

Gracias, ¿funcionará esto si hay más de 1 enlace de direcciones con diferentes hrefs? ¡Gracias!
JD Isaacks

Si agrega lo mismo para cada instancia de, a.directions-linkentonces sí. De lo contrario, si agrega un valor diferente a cada href, deberá usar un each()para iterar y agregar el valor respectivo.
Gabe

Estoy agregando el mismo valor, pero cada href es diferente para empezar. así que si el primero es one.html y el segundo es two.html ambos terminan siendo one.html & saddr ... porque captura solo el href del primer a.directions-link y lo usa para todos. Entonces creo que necesito usar cada (). ¿Le gustaría hablar sobre el uso de eso? ¡¡Gracias!!
JD Isaacks

Sí, el bucle es lo que necesitaba, ¡Gracias! :)
JD Isaacks

41

jQuery 1.4 tiene una nueva característica para hacer esto, y gobierna. He olvidado cómo se llama, pero lo usas así:

$("a.directions-link").attr("href", function(i, href) {
  return href + '?q=testing';
});

Eso también recorre todos los elementos, por lo que no es necesario $ .each


4
Eso no funcionó para mí, pero lo .attr('href', function(i) { return $(this).attr('href') + '?q=testing'; })hizo.
Elbert Alias

3
@elfbertf me funciona. ¿Estás usando jquery> = 1.4? ¿Y incluyó la variable href como segundo argumento?
zaius

$ ("# calculadora"). attr ("href", function (i, href) {return href + '? ves =' + 23 + '& v =' + 'sdfds';}); no funciona
des1roer

Probando esto en jsfiddle.net/qz9eLr2z , funciona. api.jquery.com/attr/#attr-attributeName-function dice que esto se agregó en jQuery 1.1.
Jacob C.

1
@JacobC. Permitir que attr tome una función se agregó en 1.1, pero pasar el valor actual como segundo parámetro se agregó en 1.4. Aquí hay un ejemplo de que no funciona en jquery 1.3 jsfiddle.net/qz9eLr2z/1
zaius


-1

Esto es lo que intenté hacer para agregar un parámetro en la URL que contiene el carácter específico en la URL.

jQuery('a[href*="google.com"]').attr('href', function(i,href) {
        //jquery date addition
        var requiredDate = new Date();
        var numberOfDaysToAdd = 60;
        requiredDate.setDate(requiredDate.getDate() + numberOfDaysToAdd); 
        //var convertedDate  = requiredDate.format('d-M-Y');
        //var newDate = datepicker.formatDate('yy/mm/dd', requiredDate );
        //console.log(requiredDate);

        var month   = requiredDate.getMonth()+1;
        var day     = requiredDate.getDate();

        var output = requiredDate.getFullYear() + '/' + ((''+month).length<2 ? '0' : '') + month + '/' + ((''+day).length<2 ? '0' : '') + day;
        //

Ejemplo de trabajo Click


1
¿Cuál es el propósito de esta publicación? ¿Es esta una pregunta o una respuesta? ¿O simplemente un comentario extraño? Si es más tarde, estás publicando en el lugar equivocado. ;-)
Phill Healey

He creado la muestra de demostración en jsfiddle, pero el enlace estaba mal. Ahora apunta a la URL derecha.
Bikram Shrestha

Tu 'respuesta' no tiene sentido, en realidad es más una declaración extraña.
Phill Healey
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.