Come si può cambiare l'href di un collegamento ipertestuale usando jQuery?
Utilizzando
$("a").attr("href", "http://www.google.com/")
modificherà l'href di tutti i collegamenti ipertestuali per puntare a Google. Probabilmente però vorrai un selettore un po' più raffinato. Per esempio, se hai un mix di tag di ancoraggio sorgente (hyperlink) e destinazione del link (a.k.a. "anchor"):
<a name="MyLinks"></a>
<a href="http://www.codeproject.com/">The CodeProject</a>
...Allora probabilmente non si vuole aggiungere accidentalmente gli attributi href
ad essi. Per sicurezza quindi, possiamo specificare che il nostro selettore corrisponderà solo ai tag <a>
con un attributo href
esistente:
$("a[href]") //...
Naturalmente, probabilmente avrete in mente qualcosa di più interessante. Se volete abbinare un'ancora con uno specifico href
esistente, potreste usare qualcosa del genere:
$("a[href='http://www.google.com/']").attr('href', 'http://www.live.com/')
Questo troverà i link dove il href
corrisponde esattamente alla stringa http://www.google.com/
. Un compito più complesso potrebbe essere quello di far corrispondere e poi aggiornare solo una parte del href
:
$("a[href^='http://stackoverflow.com']")
.each(function()
{
this.href = this.href.replace(/^http:\/\/beta\.stackoverflow\.com/,
"http://stackoverflow.com");
});
La prima parte seleziona solo i link dove l'href inizia con https://stackoverflow.com
. Poi, viene definita una funzione che usa una semplice espressione regolare per sostituire questa parte dell'URL con una nuova. Notate la flessibilità che questo vi dà - qualsiasi tipo di modifica al link può essere fatta qui.
A seconda che vogliate cambiare tutti i link identici a qualcos'altro o che vogliate controllare solo quelli in una data sezione della pagina o ognuno singolarmente, potreste fare una di queste cose.
Cambiare tutti i link a Google in modo che puntino a Google Maps:
<a href="http://www.google.com">
$("a[href='http://www.google.com/']").attr('href',
'http://maps.google.com/');
Per cambiare i link in una data sezione, aggiungi la classe del div contenitore al selettore. Questo esempio cambierà il link di Google nel contenuto, ma non nel footer:
<div class="content">
<p>...link to <a href="http://www.google.com/">Google</a>
in the content...</p>
</div>
<div class="footer">
Links: <a href="http://www.google.com/">Google</a>
</div>
$(".content a[href='http://www.google.com/']").attr('href',
'http://maps.google.com/');
Per cambiare i singoli link indipendentemente da dove si trovano nel documento, aggiungi un id al link e poi aggiungi quell'id al selettore. Questo esempio cambierà il secondo link di Google nel contenuto, ma non il primo o quello nel footer:
<div class="content">
<p>...link to <a href="http://www.google.com/">Google</a>
in the content...</p>
<p>...second link to <a href="http://www.google.com/"
id="changeme">Google</a>
in the content...</p>
</div>
<div class="footer">
Links: <a href="http://www.google.com/">Google</a>
</div>
$("a#changeme").attr('href',
'http://maps.google.com/');