Sådan ændrer du href for et hyperlink ved hjælp af jQuery

Brug af

$("a").attr("href", "http://www.google.com/")

vil ændre href for alle hyperlinks til at pege på Google. Du ønsker dog sandsynligvis en noget mere raffineret selector. Hvis du f.eks. har en blanding af linkkilde (hyperlink) og linkmål (alias "anker") ankertags:

<a name="MyLinks"></a>
<a href="http://www.codeproject.com/">The CodeProject</a>

...Så ønsker du sandsynligvis ikke ved et uheld at tilføje href-attributter til dem. For en sikkerheds skyld kan vi derfor angive, at vores selector kun vil matche <a>-tags med en eksisterende href-attribut:

$("a[href]") //...

Selvfølgelig har du sikkert noget mere interessant i tankerne. Hvis du ønsker at matche et anker med et specifikt eksisterende href, kan du bruge noget som dette:

$("a[href='http://www.google.com/']").attr('href', 'http://www.live.com/')

Dette vil finde links, hvor href passer nøjagtigt til strengen http://www.google.com/. En mere kompliceret opgave kan være at matche og derefter kun opdatere en del af href:

$("a[href^='http://stackoverflow.com']")
   .each(function()
   { 
      this.href = this.href.replace(/^http:\/\/beta\.stackoverflow\.com/, 
         "http://stackoverflow.com");
   });

Den første del udvælger kun links, hvor href starter med https://stackoverflow.com. Derefter defineres en funktion, der bruger et simpelt regulært udtryk til at erstatte denne del af URL'en med en ny. Bemærk den fleksibilitet dette giver dig - enhver form for ændring af linket kan foretages her.

Brug metoden attr i dit opslag. Du kan udskifte enhver attribut med en ny værdi.

$("a.mylink").attr("href", "http://cupcream.com");

Afhængigt af, om du vil ændre alle de identiske links til noget andet, eller om du kun vil have kontrol over dem i en bestemt sektion af siden eller hver enkelt af dem, kan du gøre en af følgende fremgangsmåder.

Ændre alle links til Google, så de peger på Google Maps:

<a href="http://www.google.com">

$("a[href='http://www.google.com/']").attr('href', 
'http://maps.google.com/');

Hvis du vil ændre links i et givet afsnit, skal du tilføje container div's klasse til selectoren. Dette eksempel vil ændre Google-linket i indholdet, men ikke i footeren:

<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/');

Hvis du vil ændre individuelle links, uanset hvor de befinder sig i dokumentet, skal du tilføje et id til linket og derefter tilføje dette id til selectoren. Dette eksempel ændrer det andet Google-link i indholdet, men ikke det første link eller linket i sidefoden:

<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/');