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