¿Cómo obtener texto de anclaje / href al hacer clic usando jQuery?

113

Considere que tengo un ancla que se ve así

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

NOTA: No habrá ninguna identificación o clase para el ancla ...

Quiero obtener href / text en el jQuery onclickde ese ancla.

ACP
fuente

Respuestas:

242

Nota: aplique la clase info_linka cualquier enlace del que desee obtener la información.

<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());
  });
});

.

Actualización basada en la edición de preguntas

Puedes conseguirlos así ahora:

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());
  });
});
Sarfraz
fuente
1
Esto se romperá si otro elemento tiene el enlace de nombre de clase. Es mejor especificar también el selector de etiquetas.
rahul
@rahul: Es gracioso, no lo será, linkse supone que la clase es para los enlaces específicos de los que quiere obtener información.
Sarfraz
Pero, ¿qué pasa si el siguiente marcado está allí<div class='link' />
Rahul
@rahul: vuelve a ser divertido, podría poner a sus enlaces cualquier nombre único.
Sarfraz
podría usar this.hash en lugar de $ (this) .attr ('href')
meo
6

Editado para reflejar la actualización a la pregunta

$(document).ready(function() {
    $(".res a").click(function() {
        alert($(this).attr("href"));
    });
});
GlenCrawford
fuente
que apuntará a todos los enlaces, incluso a los que podrían no interesarle
Sarfraz
4

Sin jQuery:

No necesita jQuery cuando es tan simple hacer esto usando JavaScript puro. Aquí hay dos opciones:

  • Método 1: recupere el valor exacto del hrefatributo:

    Seleccione el elemento y luego use el .getAttribute()método.

    Este método no devuelve la URL completa, sino que recupera el valor exacto del hrefatributo.

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


  • Método 2: recuperar la ruta URL completa:

    Seleccione el elemento y luego simplemente acceda a la hrefpropiedad .

    Este método devuelve la ruta URL completa.

    En este caso: http://stacksnippets.net/relative/path.html.

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


Como lo indica su título, desea obtener el hrefvalor al hacer clic. Simplemente seleccione un elemento, agregue un detector de eventos de clic y luego devuelva el hrefvalor utilizando cualquiera de los métodos mencionados anteriormente.

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>

Josh Crozier
fuente
0

Código actualizado

$('a','div.res').click(function(){
  var currentAnchor = $(this);
  alert(currentAnchor.text());
  alert(currentAnchor.attr('href'));
});
rahul
fuente
que apuntará a todos los enlaces, incluso aquellos que no le interesen.
Sarfraz
Pero esto está de acuerdo con su marcado en el que no ha especificado un nombre de clase.
rahul
Deberías guiarlo donde sea posible mejorar :)
Sarfraz
La posible razón para la votación en contra podría ser que el interrogador no está buscando lo que ha hecho con$('a','div.res')
Sarfraz
0

Alternativa

Usando el ejemplo de Sarfraz anterior.

<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);
  });
});
Jacob Ashcraft
fuente