Comment obtenir le texte d'ancrage / href en cliquant sur jQuery?

113

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

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

REMARQUE: il n'y aura pas d'identifiant ou de classe pour l'ancre ...

Je veux obtenir soit href / text dans le jQuery onclickde cette ancre.

ACP
la source

Réponses:

242

Remarque: appliquez la classe info_linkà n'importe quel 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());
  });
});

.

Mettre à jour en fonction de la modification de la question

Vous pouvez les obtenir comme ceci 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());
  });
});
Sarfraz
la source
1
Cela se cassera si un autre élément a le lien de nom de classe. Mieux vaut également spécifier le sélecteur de balises.
rahul
@rahul: C'est drôle, non, la linkclasse est censée être pour les liens spécifiques dont il souhaite obtenir des informations.
Sarfraz
Mais que faire si le balisage suivant est là,<div class='link' />
rahul
@rahul: ça redevient drôle, il pourrait donner à ses liens n'importe quel nom unique.
Sarfraz
vous pouvez utiliser this.hash au lieu de $ (this) .attr ('href')
meo
6

Modifié pour refléter la mise à jour de la question

$(document).ready(function() {
    $(".res a").click(function() {
        alert($(this).attr("href"));
    });
});
GlenCrawford
la source
qui ciblera tous les liens, même ceux qui pourraient ne pas l'intéresser
Sarfraz
4

Sans jQuery:

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

  • Méthode 1 - Récupérez la valeur exacte de l' hrefattribut:

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

    Cette méthode ne renvoie pas l'URL complète, mais récupère la valeur exacte de l' hrefattribut.

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


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

    Sélectionnez l'élément et accédez simplement à la hrefpropriété .

    Cette méthode renvoie le chemin d'URL complet.

    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 hrefvaleur en un clic. Sélectionnez simplement un élément, ajoutez un écouteur d'événement de clic, puis renvoyez la hrefvaleur 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>

Josh Crozier
la source
0

Code mis à jour

$('a','div.res').click(function(){
  var currentAnchor = $(this);
  alert(currentAnchor.text());
  alert(currentAnchor.attr('href'));
});
rahul
la source
qui ciblera tous les liens, même ceux qui pourraient ne pas l'intéresser.
Sarfraz
Mais c'est en fonction de son balisage dans lequel il n'a pas spécifié de nom de classe.
rahul
Vous devriez le guider là où une amélioration est possible :)
Sarfraz
La raison possible du vote $('a','div.res')
Sarfraz
0

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