jQueryを使用してクリック時にアンカーテキスト/ hrefを取得する方法


113

私がこのようなアンカーを持っていると考えてください

 <div class="res">
     <a href="~/Resumes/Resumes1271354404687.docx">
         ~/Resumes/Resumes1271354404687.docx
     </a>
 </div>

注:アンカーのIDまたはクラスはありません...

onclickそのアンカーのjQuery でhref / textを取得したい。

回答:


242

注:info_link情報を取得するリンクにクラスを適用します。

<a class="info_link" href="~/Resumes/Resumes1271354404687.docx">
    ~/Resumes/Resumes1271354404687.docx
</a>

hrefの場合:

$(function(){
  $('.info_link').click(function(){
    alert($(this).attr('href'));
    // or alert($(this).hash();
  });
});

テキストの場合:

$(function(){
  $('.info_link').click(function(){
    alert($(this).text());
  });
});

質問編集に基づいて更新

あなたは今それらをこのように得ることができます:

hrefの場合:

$(function(){
  $('div.res a').click(function(){
    alert($(this).attr('href'));
    // or alert($(this).hash();
  });
});

テキストの場合:

$(function(){
  $('div.res a').click(function(){
    alert($(this).text());
  });
});

1
別の要素にクラス名リンクがある場合、これは壊れます。タグセレクターも指定することをお勧めします。
rahul

@rahul:おもしろいですよね、linkクラスは彼が情報を取得したい特定のリンクのためのものです。
Sarfraz、2010

しかし、次のマークアップがある場合<div class='link' />
ラーフル

@rahul:再びおかしくなり、リンクにユニークな名前を付けることができます。
Sarfraz、2010

$(this).attr( 'href')の代わりにthis.hashを使用できます
meo

6

質問の更新を反映するように編集されました

$(document).ready(function() {
    $(".res a").click(function() {
        alert($(this).attr("href"));
    });
});

それは彼が興味がないかもしれないものも
含めて

4

jQueryなし:

純粋なJavaScriptを使用してこれを行うのが非常に簡単な場合は、jQuery は必要ありません。2つのオプションがあります。

  • 方法1- href属性の正確な値を取得します。

    要素を選択して、.getAttribute()メソッドを使用します。

    このメソッドは完全なURLを返すのではなくhref属性の正確な値を取得します。

    var anchor = document.querySelector('a'),
        url = anchor.getAttribute('href');
    
    alert(url);
    <a href="/relative/path.html"></a>


  • 方法2-完全なURLパスを取得します。

    要素を選択して、hrefプロパティにアクセスします

    このメソッドは、完全なURLパスを返します。

    この場合:http://stacksnippets.net/relative/path.html

    var anchor = document.querySelector('a'),
        url = anchor.href;
    
    alert(url);
    <a href="/relative/path.html"></a>


あなたのタイトルが意味するように、あなたhrefはクリックで価値を得たいと思っています。要素を選択し、クリックイベントリスナーを追加してhref、前述のメソッドのいずれかを使用して値を返すだけです。

var anchor = document.querySelector('a'),
    button = document.getElementById('getURL'),
    url = anchor.href;

button.addEventListener('click', function (e) {
  alert(url);
});
<button id="getURL">Click me!</button>
<a href="/relative/path.html"></a>


0

更新されたコード

$('a','div.res').click(function(){
  var currentAnchor = $(this);
  alert(currentAnchor.text());
  alert(currentAnchor.attr('href'));
});

それは彼がに興味がないかもしれませんものも含め、すべてのリンクをターゲットとします。
Sarfraz

しかし、これは彼がクラス名を指定していない彼のマークアップによるものです。
rahul

あなたは改善が可能な場所で彼を導くべきです:)
Sarfraz

反対票の理由として考えられるのは、質問者があなたがしたことを探していないということかもしれません$('a','div.res')
Sarfraz

0

オルタナティブ

上記のSarfrazの例を使用します。

<div class="res">
    <a class="info_link" href="~/Resumes/Resumes1271354404687.docx">
        ~/Resumes/Resumes1271354404687.docx
    </a>
</div>

hrefの場合:

$(function(){
  $('.res').on('click', '.info_link', function(){
    alert($(this)[0].href);
  });
});
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.