Как да промените href за хипервръзка с помощта на jQuery

Използване на

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

ще промени href на всички хипервръзки, така че да сочат към Google. Вероятно обаче искате малко по-прецизен селектор. Например, ако имате комбинация от тагове за източник на връзка (хипервръзка) и тагове за цел на връзката (наричани още "котва"):

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

...Тогава вероятно не искате случайно да добавяте атрибути href към тях. За по-голяма сигурност можем да укажем, че нашият селектор ще съвпада само с тагове <a> със съществуващ атрибут href:

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

Разбира се, вие вероятно имате предвид нещо по-интересно. Ако искате да съответствате на котва с определен съществуващ атрибут href, може да използвате нещо подобно:

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

Това ще открие връзки, при които href точно съвпада с низа http://www.google.com/. По-сложна задача може да бъде намирането на съответствие, след което да се актуализира само част от href:

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

Първата част избира само връзки, при които href започва с https://stackoverflow.com. След това се дефинира функция, която използва прост регулярен израз, за да замени тази част от URL адреса с нова. Обърнете внимание на гъвкавостта, която ви дава това - тук може да се направи всякакъв вид модификация на връзката.

Използвайте метода attr при търсенето. Можете да смените всеки атрибут с нова стойност.

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

В зависимост от това дали искате да промените всички идентични връзки на нещо друго или искате да контролирате само връзките в даден раздел на страницата или всяка една поотделно, можете да направите едно от тези действия.

Променете всички връзки към Google, така че да сочат към Google Maps:

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

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

За да промените връзките в даден раздел, добавете класа на контейнерния div'към селектора. Този пример ще промени връзката към Google в съдържанието, но не и в долния колонтитул:

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

За да промените отделни връзки, независимо от това къде се намират в документа, добавете id към връзката и след това добавете този id към селектора. Този пример ще промени втората връзка на Google в съдържанието, но не и първата или тази в долния колонтитул:

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