Hoe kan ik de href voor een hyperlink met behulp van jQuery

Gebruik

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

zal de href van alle hyperlinks veranderen om naar Google te wijzen. Je wilt waarschijnlijk een iets meer verfijnde selector. Bijvoorbeeld, als je een mix hebt van link bron (hyperlink) en link doel (a.k.a. "anchor") anker tags:

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

...Dan wil je waarschijnlijk niet'per ongeluk href attributen aan ze toevoegen. Voor de veiligheid kunnen we dan specificeren dat onze selector alleen <a> tags met een bestaand href attribuut zal matchen:

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

Natuurlijk, jij'zult waarschijnlijk iets interessanters in gedachten hebben. Als je een anker wilt matchen met een specifieke bestaande href, zou je iets als dit kunnen gebruiken:

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

Dit zal links vinden waar de href precies overeenkomt met de string http://www.google.com/. Een meer ingewikkelde taak zou het matchen kunnen zijn, en dan alleen een deel van de href bijwerken:

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

Het eerste deel selecteert alleen links waar de href begint met https://stackoverflow.com. Daarna wordt een functie gedefinieerd die een eenvoudige reguliere expressie gebruikt om dit deel van de URL te vervangen door een nieuwe. Merk de flexibiliteit op die dit geeft - elke soort wijziging aan de link kan hier worden gedaan.

Gebruik de attr methode op je lookup. Je kunt elk attribuut verwisselen met een nieuwe waarde.

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

Afhankelijk van het feit of je alle identieke links in iets anders wilt veranderen of dat je alleen de links in een bepaalde sectie van de pagina wilt controleren of elke link afzonderlijk, zou je één van deze dingen kunnen doen.

Verander alle links naar Google zodat ze naar Google Maps verwijzen:

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

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

Om links in een bepaalde sectie te veranderen, voeg de klasse van de container div's toe aan de selector. Dit voorbeeld zal de Google link in de inhoud veranderen, maar niet in de voettekst:

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

Om individuele links te veranderen, ongeacht waar ze in het document staan, voeg je een id toe aan de link en vervolgens voeg je die id toe aan de selector. Dit voorbeeld zal de tweede Google link in de inhoud veranderen, maar niet de eerste of die in de voettekst:

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