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.

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

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

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>


0

Code mis à jour

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

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);
  });
});
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.