Como obter texto âncora / href no clique usando jQuery?


113

Considere que tenho uma âncora que se parece com esta

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

NOTA: Não haverá qualquer id ou classe para a âncora ...

Quero obter href / text no jQuery onclickdessa âncora.

Respostas:


242

Nota: aplique a classe info_linka qualquer link de onde você deseja obter as informações.

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

Para href:

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

Para Texto:

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

.

Atualizar com base na edição da pergunta

Você pode obtê-los assim agora:

Para href:

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

Para Texto:

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

1
Isso será interrompido se outro elemento tiver o link do nome da classe. Melhor especificar também o seletor de tags.
— rahul de

@rahul: É engraçado, não vai, a linkaula deveria ser para os links específicos dos quais ele deseja obter informações.
— Sarfraz,

Mas e se a seguinte marcação estiver lá,<div class='link' />
— rahul

@rahul: está ficando engraçado de novo, ele poderia dar aos seus links qualquer nome único.
— Sarfraz,

você poderia usar this.hash em vez de $ (this) .attr ('href')
— meo

6

Editado para refletir a atualização da pergunta

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

que terá como alvo todos os links, mesmo aqueles em que ele possa não estar interessado
— Sarfraz

4

Sem jQuery:

Você não precisa do jQuery quando é tão simples fazer isso usando JavaScript puro. Aqui estão duas opções:

  • Método 1 - Recupere o valor exato do hrefatributo:

    Selecione o elemento e use o .getAttribute()método.

    Este método não retorna o URL completo, em vez disso, ele recupera o valor exato do hrefatributo.

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


  • Método 2 - Recupere o caminho de URL completo:

    Selecione o elemento e simplesmente acesse a hrefpropriedade .

    Este método retorna o caminho completo do URL.

    Neste caso: http://stacksnippets.net/relative/path.html.

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


Como seu título indica, você deseja obter o hrefvalor no clique. Basta selecionar um elemento, adicionar um ouvinte de evento de clique e retornar o hrefvalor usando um dos métodos mencionados acima.

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

Código atualizado

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

que terá como alvo todos os links, mesmo aqueles em que ele possa não estar interessado.
— Sarfraz

Mas isso está de acordo com sua marcação na qual ele não especificou um nome de classe.
— rahul

Você deve guiá-lo onde melhorias são possíveis :)
— Sarfraz

A possível razão para o voto negativo pode ser que o questionador não está procurando o que você fez com$('a','div.res')
— Sarfraz

0

Alternativo

Usando o exemplo de Sarfraz acima.

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

Para href:

$(function(){
  $('.res').on('click', '.info_link', function(){
    alert($(this)[0].href);
  });
});
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.