如何使用jQuery获取单击锚文本/ href?

时间:2010-04-16 11:05:08

标签: jquery anchor

考虑我有一个看起来像这样的锚

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

注意:锚点不会有任何ID或类...

我想在该锚点的jQuery onclick中获得href / text。

5 个答案:

答案 0 :(得分:232)

注意:将课程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 :(得分:5)

编辑以反映对问题的更新

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

答案 2 :(得分:4)

没有jQuery:

当使用纯JavaScript这么简单时,你不需要 jQuery。这有两个选择:

  • 方法1 - 检索href属性的确切值:

    选择元素,然后使用.getAttribute()方法。

    此方法返回完整的网址,而是检索href属性的确切值。

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


  • 方法2 - 检索完整的网址路径:

    选择元素,然后只需访问href property

    此方法返回完整的URL路径。

    在这种情况下:http://stacksnippets.net/relative/path.html

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


如标题所示,您希望点击时获得href值。只需选择一个元素,添加一个click事件监听器,然后使用上述任一方法返回href值。

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

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

答案 3 :(得分:0)

更新了代码

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

答案 4 :(得分:0)

替代

使用上面Sarfraz中的示例。

ngAfterViewChecked(){
    setTimeout(()=>this.isSignupProcess());

    }

    OR
ngAfterViewChecked(){
    this.isSignupProcess(); 
    this.cd.detectChanges();
    }

对于href:

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