jQueryを使用してハイパーリンクのhrefを変更する方法

https://stackoverflow.com/questions/179713

05-07-2019
|

質問

jQueryを使用してハイパーリンクのhrefを変更するにはどうすればよいですか?

解決

使用

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

すべてのハイパーリンクのhrefを変更して、Googleを指すようにします。ただし、おそらくより洗練されたセレクターが必要です。たとえば、リンクソース（ハイパーリンク）とリンクターゲット（別名<！> quot; anchor <！> quot;）アンカータグが混在している場合：

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

...その後、おそらく誤ってhref属性を追加したくないでしょう。安全のため、セレクタが既存の<a>属性を持つhttp://www.google.com/タグのみに一致するように指定できます：

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

もちろん、あなたはおそらくもっと面白いことを心に留めているでしょう。アンカーを特定の既存のhttp://stackoverflow.comと一致させたい場合は、次のようなものを使用できます。

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

これにより、<=>が文字列<=>と完全に一致するリンクが検索されます。より複雑なタスクが一致し、<=>：

の一部のみを更新する場合があります

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

最初の部分は、hrefが<=>で始まるリンクのみを選択します。次に、単純な正規表現を使用してURLのこの部分を新しいものに置き換える関数が定義されます。これがあなたに与える柔軟性に注意してください-リンクへのあらゆる種類の変更はここで行うことができます。

他のヒント

jQuery 1.6以降では、次を使用する必要があります。

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

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

この投稿で詳細を確認できます： .prop（）vs .attr（）

ルックアップでattrメソッドを使用します。新しい値を持つ属性を切り替えることができます。

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

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

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

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

jQueryを使用しないいくつかのメソッド：

all href要素の<a>値を変更する場合は、それらをすべて選択してからnodelist ： （例）

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

実際に[href]属性を持つすべてのa[href]要素のgoogle.com値を変更する場合は、a[href*="google.com"]属性セレクター（a[href$=".png"]）を追加して選択します： （例）
```
var anchors = document.querySelectorAll('a[href]');
Array.prototype.forEach.call(anchors, function (element, index) {
    element.href = "http://stackoverflow.com";
});
```
特定の値、たとえば.pngを含む要素のa[href^="https://"]値を変更する場合は、属性セレクターhttps://を使用します： （例）
```
var anchors = document.querySelectorAll('a[href*="google.com"]');
Array.prototype.forEach.call(anchors, function (element, index) {
    element.href = "http://stackoverflow.com";
});
```
同様に、他の属性セレクターも使用できます。例えば：
- <=>を使用して、<=>値が<=>で終わる<=>要素を選択できます。
- <=>を使用して、<=>で接頭辞付きの<=>値を持つ<=>要素を選択できます。

複数の条件を満たす<=>要素の<=>値を変更する場合： （例）

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

.. ほとんどの場合の場合、正規表現は不要です。

このスニペットは、クラス '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;
});

そのためにjQueryの使用をやめてください！これは、JavaScriptを使用する場合のみ非常に簡単です。

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

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

これを行う簡単な方法は次のとおりです。

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

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

または

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

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

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

現在、正確なアンカーまたはアンカーのグループを識別する方法はたくさんあります：

非常にシンプルなもの：

タグ名からアンカーを選択：$("a")
インデックスからアンカーを選択：$("a:eq(0)")
特定のクラスのアンカーを選択します（このクラスではアンカーのみクラスactive）を使用：$("a.active")
特定のIDを持つアンカーの選択（ここでは例profileLink ID）：$("a#proileLink")
最初のアンカーhrefの選択：$("a:first")

より便利なもの：

href属性を持つすべての要素の選択：$("[href]")
特定のhrefを持つすべてのアンカーの選択：$("a[href='www.stackoverflow.com']")
特定のhrefを持たないすべてのアンカーの選択：$("a[href!='www.stackoverflow.com']")
特定のURLを含むhrefを持つすべてのアンカーの選択：$("a[href*='www.stackoverflow.com']")
特定のURLで始まるhrefを持つすべてのアンカーの選択：$("a[href^='www.stackoverflow.com']")
特定の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);
    });
   });

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

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>

これで、「外観/ウィジェット」に移動し、フッターウィジェット領域の 1 つを選択し、テキストウィジェットを使用して次のショートコードを追加できるようになりました。

[myjavascript]

セレクターは、使用している画像や Retina 対応かどうかに応じて変わる場合がありますが、開発者ツールを使用すればいつでも確認できます。

属性の

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

次のJSがあると想像してください：

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

そしてリンクを変更したい...

ライブラリを使用せずに pure JavaScript を使用する：

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

しかし、 jQuery でもできること：

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

または

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

この場合、jQueryが既に挿入されている場合、おそらくjQueryの方が短く、クロスブラウザに見えますが、それ以外は<=>を使用します...

ライセンス： CC-BY-SA と帰属

所属していません StackOverflow