web-dev-qa-db-fra.com

Comment obtenir un texte d'ancrage/href sur un clic en utilisant jQuery?

Considérez que j'ai une ancre qui ressemble à ceci

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

NOTE: Il n'y aura pas d'id ou de classe pour l'ancre ...

Je veux obtenir href/text dans jQuery onclick de cette ancre.

jqueryanchor
106
Chendur Pandian

Remarque: Appliquez la classe info_link à tout lien dont vous souhaitez obtenir les informations.

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

Pour href: 

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

Pour le texte: 

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

.

Mise à jour basée sur une question Modifier

Vous pouvez les obtenir comme ça maintenant:

Pour href: 

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

Pour le texte: 

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

Édité pour refléter la mise à jour de la question 

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

Sans jQuery:

Vous n'avez pas besoin jQuery quand il est si simple de le faire en utilisant du JavaScript pur. Voici deux options:

  • Méthode 1 - Récupérer la valeur exacte de l'attribut href:

    Sélectionnez l'élément, puis utilisez la méthode .getAttribute() .

    Cette méthode renvoie not l'URL complète, mais récupère la valeur exacte de l'attribut href.

    var anchor = document.querySelector('a'),
    url = anchor.getAttribute('href');

alert(url);
    <a href="/relative/path.html"></a>

  • Méthode 2 - Récupérer le chemin complet de l'URL:

    Sélectionnez l'élément, puis accédez simplement à la propriété href .

    Cette méthode retourne le chemin complet de l'URL.

    Dans ce cas: http://stacksnippets.net/relative/path.html.

    var anchor = document.querySelector('a'),
    url = anchor.href;

alert(url);
    <a href="/relative/path.html"></a>

Comme votre titre l'indique, vous souhaitez obtenir la valeur href au clic. Il vous suffit de sélectionner un élément, d'ajouter un écouteur d'événement au clic, puis de renvoyer la valeur href en utilisant l'une des méthodes susmentionnées.

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>

4
Josh Crozier

Alternative

En utilisant l'exemple de Sarfraz ci-dessus.

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

Pour href:

$(function(){
  $('.res').on('click', '.info_link', function(){
    alert($(this)[0].href);
  });
});
0
Jacob Ashcraft

Code mis à jour

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