¿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?

jquery JD Isaacks
fuente

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');
});
Gabe
fuente
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

zaius
fuente
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
2 
$("a.directions-link").attr("href", $("a.directions-link").attr("href")+"...your additions...");
Diodeus - James MacFarlane
fuente
1
Esto está mal. Aplica el href del primer ".directions-link" coincidente a todos los enlaces de esa clase. jsfiddle.net/yuezewaw
Jacob C.
-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

Bikram Shrestha
fuente
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