web-dev-qa-db-ja.com

JQueryを使ってハイパーリンクのhrefを変更する方法

JQueryを使ってハイパーリンクのhrefをどのように変更できますか？

javascriptjqueryhyperlink
1186
Brian Boatright

を使う

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

googleを指すようにすべてのハイパーリンクのhrefを変更します。あなたはおそらく多少洗練されたセレクターが欲しいです。たとえば、リンク元（ハイパーリンク）とリンク先（別名 "anchor"）のアンカータグが混在しているとします。

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

...そして、あなたはおそらくhref属性を誤ってそれらに追加したくないでしょう。安全のために、セレクタが既存のhref属性を持つ<a>タグにのみマッチするように指定することができます。

$("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 が で始まるリンク/ http://stackoverflow.comだけを選択します。次に、URLのこの部分を新しいもので置き換えるために単純な正規表現を使用する関数が定義されています。これがあなたに与える柔軟性に注意してください - リンクへのどんな種類の修正もここでされることができました。

1727
Shog9

JQuery 1.6以上では次のものを使うべきです：

$("a").prop("href", "http://www.jakcms.com")

propとattrの違いは、attrはHTML属性を取得するのに対し、propはDOMプロパティを取得することです。

あなたはこの記事でより多くの詳細を見つけることができます： .prop（）vs .attr（）

270
Jerome

ルックアップにattrメソッドを使用してください。新しい値を使って任意の属性を切り替えることができます。

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

同一のリンクすべてを別のものに変更するのか、ページの特定のセクションにあるリンクのみを個別に制御するのか、またはそれぞれ個別に制御するのかに応じて、これらのいずれかを実行できます。

Googleマップを指すように、すべてのリンクをGoogleに変更します。

<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をセレクタに追加します。この例では、コンテンツ内の2番目の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/');
38
flamingLogos

OPがjQueryの回答を明示的に要求したとしても、最近すべてのものにjQueryを使用する必要はありません。

JQueryのないいくつかのメソッド：

  • all<a>要素のhrefの値を変更したい場合は、それらをすべて選択してから nodelist を繰り返します。 （例）

    var anchors = document.querySelectorAll('a');
Array.prototype.forEach.call(anchors, function (element, index) {
    element.href = "http://stackoverflow.com";
});

  • 実際にhref属性を持つすべての<a>要素のhref値を変更したい場合は、[href]属性セレクター（a[href]）を追加してそれらを選択します。 （例）

    var anchors = document.querySelectorAll('a[href]');
Array.prototype.forEach.call(anchors, function (element, index) {
    element.href = "http://stackoverflow.com";
});

  • 含むである<a>要素のhref値を特定の値、例えばgoogle.comに変更したい場合は、属性セレクタa[href*="google.com"]： （例） を使用してください。

    var anchors = document.querySelectorAll('a[href*="google.com"]');
Array.prototype.forEach.call(anchors, function (element, index) {
    element.href = "http://stackoverflow.com";
});

    同様に、他の attributeセレクター も使用できます。例えば：

    • a[href$=".png"]は、hrefの値が<a>で終わる.png要素を選択するために使用できます。

    • a[href^="https://"]は、<a>を持つ接頭辞のhref値を持つhttps://要素を選択するために使用できます。

  • 複数の条件を満たす<a>要素のhref値を変更したい場合： （例）

    var anchors = document.querySelectorAll('a[href^="https://"], a[href$=".png"]');
Array.prototype.forEach.call(anchors, function (element, index) {
    element.href = "http://stackoverflow.com";
});

ほとんどの場合、正規表現は必要ありません。

32
Josh Crozier

このスニペットは、クラス 'menu_link'のリンクがクリックされたときに呼び出され、リンクのテキストとURLを表示します。戻り値falseはリンクをたどらないようにします。

<a rel='1' class="menu_link" href="option1.html">Option 1</a>
<a rel='2' class="menu_link" href="option2.html">Option 2</a>

$('.menu_link').live('click', function() {
   var thelink = $(this);
   alert ( thelink.html() );
   alert ( thelink.attr('href') );
   alert ( thelink.attr('rel') );

   return false;
});
9
crafter

そのためだけにjQueryを使用しないでください。これはJavaScriptだけでとても簡単です。

document.querySelector('#the-link').setAttribute('href', 'http://google.com');

https://jsfiddle.net/bo77f8mg/1/ /

6
Pawel

簡単な方法は次のとおりです。

Attr関数 （jQueryバージョン1.0以降） 

$("a").attr("href", "https://stackoverflow.com/")

または

Prop関数 （jQueryバージョン1.6以降） 

$("a").prop("href", "https://stackoverflow.com/")

また、上記の方法の利点は、selectorが単一のアンカーを選択した場合はそのアンカーのみを更新し、selectorがアンカーのグループを返した場合は1つのステートメントのみを介して特定のグループを更新することです。

現在、正確なアンカーまたはアンカーのグループを識別する方法は多数あります。

非常に単純なもの：

  1. タグ名でアンカーを選択してください：$("a")
  2. インデックスからアンカーを選択してください：$("a:eq(0)")
  3. 特定のクラスのアンカーを選択します（このクラスのようにクラスactiveを持つアンカーのみ）：$("a.active")
  4. 特定のIDを持つアンカーを選択する（ここでは例profileLink ID）：$("a#proileLink")
  5. 最初のアンカーhrefを選択してください：$("a:first")

もっと便利なもの：

  1. Href属性を持つすべての要素を選択する：$("[href]")
  2. 特定のhrefを持つすべてのアンカーを選択する：$("a[href='www.stackoverflow.com']")
  3. 特定のhrefを持たないすべてのアンカーを選択する：$("a[href!='www.stackoverflow.com']")
  4. 特定のURLを含むhrefを持つすべてのアンカーを選択する：$("a[href*='www.stackoverflow.com']")
  5. 特定のURLで始まるhrefですべてのアンカーを選択する：$("a[href^='www.stackoverflow.com']")
  6. 特定のURLで終わるhrefを持つすべてのアンカーを選択する：$("a[href$='www.stackoverflow.com']")

今、あなたが特定のURLを修正したいならば、あなたはそれをすることができます：

たとえば、google.comに送信されるすべてのURLにプロキシWebサイトを追加する場合は、次のように実装します。

$("a[href^='http://www.google.com']")
   .each(function()
   { 
      this.href = this.href.replace(/http:\/\/www.google.com\//gi, function (x) {
        return "http://proxywebsite.com/?query="+encodeURIComponent(x);
    });
   });
5
Aman Chhabra
 $("a[href^='http://stackoverflow.com']")
   .each(function()
   { 
      this.href = this.href.replace(/^http:\/\/beta\.stackoverflow\.com/, 
         "http://stackoverflow.com");
   });
3
Anup

Wordpress Avadaテーマロゴ画像のHREFを変更する

ShortCode Exec PHPプラグインをインストールすると、myjavascriptと呼ばれるこのショートコードを作成できます。

?><script type="text/javascript">
jQuery(document).ready(function() {
jQuery("div.fusion-logo a").attr("href","tel:303-985-9850");
});
</script>

これで、Appearance/Widgetsに行き、フッターウィジェット領域の1つを選び、テキストウィジェットを使って次のショートコードを追加することができます。

[myjavascript]

セレクターはあなたが使用している画像とそれが網膜の準備ができているかどうかによって変わるかもしれませんが、あなたはいつでも開発者ツールを使ってそれを理解することができます。

2
Cooper

属性にhrefを使用すると、純粋なJavaScriptを使用して変更できますが、ページにすでにjQueryが挿入されている場合は心配しないでください。両方の方法で説明します。

以下のhrefがあると想像してください。

<a id="ALi" alt="ALi" href="http://dezfoolian.com.au">Alireza Dezfoolian</a>

そして、あなたはそれをリンクに変えるのが好きです...

ライブラリを使用せずに 純粋なJavaScript を使用すると、次のことができます。

document.getElementById("ALi").setAttribute("href", "https://stackoverflow.com");

しかし、 jQuery でもできます。

$("#ALi").attr("href", "https://stackoverflow.com");

または

$("#ALi").prop("href", "https://stackoverflow.com");

この場合、すでにjQueryをインジェクションしているのであれば、おそらくjQueryの方が短くてクロスブラウザが多いでしょうが…それ以外はJSを使います….

1
Alireza