如何使用jQuery获得锚文本/ href?


113

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

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

注意:锚点将没有任何ID或类...

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

Answers:


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

但是,如果存在以下标记,该怎么办?<div class='link' />
rahul

@rahul:这又变得很有趣,他可以给链接指定任何唯一的名称。
Sarfraz

您可以使用this.hash代替$(this).attr('href')
meo 2010年

6

编辑以反映对问题的更新

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

它将针对所有链接,甚至他可能不感兴趣的所有链接
Sarfraz 2010年

4

没有jQuery:

你并不需要 jQuery的时候它是如此简单做到这一点使用纯JavaScript。这里有两个选择:

  • 方法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点击的价值。只需选择一个元素,添加一个click事件侦听器,然后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 2010年

拒绝投票的可能原因可能是,提问者没有寻找您所做的事情$('a','div.res')
Sarfraz 2010年

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);
  });
});
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.