javascript 追加 jQueryを使ってハイパーリンクのhrefを変更する方法



jquery href 実行 (8)

使用

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

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


すべての同じリンクを別のものに変更するか、ページの特定のセクションまたは個々のセクションの個々のリンクを個別に制御するかによって、これらのいずれかを行うことができます。

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を使用しないいくつかのメソッド:

  • すべての <a>要素のhref値を変更する場合は、それらをすべて選択してから、 nodelist反復処理します(example)

    var anchors = document.querySelectorAll('a');
    Array.prototype.forEach.call(anchors, function (element, index) {
        element.href = "http://.com";
    });
    
  • 実際にhref属性を持つすべての<a>要素のhref値を変更するには、 [href]属性セレクタ( a[href] )を追加して選択します(example)

    var anchors = document.querySelectorAll('a[href]');
    Array.prototype.forEach.call(anchors, function (element, index) {
        element.href = "http://.com";
    });
    
  • 特定の値を含む <a>要素(たとえばgoogle.com )のhref値を変更するには、属性セレクタa[href*="google.com"]ます(example)

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

    同様に、他の属性セレクタを使用することもできます 。 例えば:

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

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

  • 複数の条件を満たす<a>要素のhref値を変更したい場合:( (example)

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

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


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

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

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

この記事で詳しく知ることができます: .prop()と.attr()


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

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

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

Attr関数 (jQueryバージョン1.0以降)

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

または

Prop関数 (jQueryバージョン1.6以降)

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

また、上記の方法の利点は、セレクターが単一のアンカーを選択すると、そのアンカーのみを更新し、セレクターがアンカーのグループを戻す場合、特定のグループを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..com']")すべてのアンカーを選択する
  3. 特定のhref: $("a[href!='www..com']")を持たないすべてのアンカーを選択する
  4. 特定のURLを含むhrefですべてのアンカーを選択する: $("a[href*='www..com']")
  5. 特定のURLから始まるhrefですべてのアンカーを選択する: $("a[href^='www..com']")
  6. 特定のURLで終わるhrefを持つすべてのアンカーを選択する: $("a[href$='www..com']")

特定のURLを修正する場合は、次のようにします。

たとえば、google.comに行くすべてのURLにプロキシウェブサイトを追加する場合は、次のように実装できます。

$("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);
    });
   });

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]

セレクタは、どの画像を使用しているのか、網膜の準備ができているかによって変わりますが、開発者ツールを使用していつでも把握できます。


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




hyperlink