¿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.

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

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

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>


0

Código actualizado

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

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);
  });
});
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.