web-dev-qa-db-ja.com

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

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

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

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

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

jqueryanchor
109
ACP

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

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

For href：

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

テキストの場合：

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

。

質問の編集に基づく更新

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

For href：

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

テキストの場合：

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

質問の更新を反映するように編集

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

JQueryなし：

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

  • 方法1-href属性の正確な値を取得する：

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

    このメソッドは、完全なURLをnot返しますが、代わりに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>
4
Josh Crozier

代替案

上記の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);
  });
});
0
Jacob Ashcraft

更新されたコード

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