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.