Wie bekomme ich mit jQuery Ankertext / href beim Klicken?

113

Bedenken Sie, ich habe einen Anker, der so aussieht

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

HINWEIS: Es gibt keine ID oder Klasse für den Anker ...

Ich möchte entweder href / text in der jQuery onclickdieses Ankers erhalten.

ACP
quelle

Antworten:

242

Hinweis: Wenden Sie die Klasse info_linkauf einen beliebigen Link an, von dem Sie die Informationen erhalten möchten.

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

Für href:

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

Für Text:

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

.

Update basierend auf Frage bearbeiten

Sie können sie jetzt so bekommen:

Für href:

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

Für Text:

$(function(){
  $('div.res a').click(function(){
    alert($(this).text());
  });
});
Sarfraz
quelle
1
Dies wird unterbrochen, wenn ein anderes Element den Klassennamen-Link hat. Besser auch die Tag-Auswahl angeben.
Rahul
@rahul: Es ist lustig, es wird nicht, die linkKlasse soll für die spezifischen Links sein, von denen er Informationen erhalten möchte.
Sarfraz
Aber was ist, wenn das folgende Markup vorhanden ist <div class='link' />
?
@rahul: es wird wieder lustig, er könnte seinen links jeden eindeutigen namen geben.
Sarfraz
Sie könnten die this.hash anstelle von $ (this) .attr ('href')
meo
6

Bearbeitet, um die Aktualisierung der Frage widerzuspiegeln

$(document).ready(function() {
    $(".res a").click(function() {
        alert($(this).attr("href"));
    });
});
GlenCrawford
quelle
das wird auf alle Links abzielen, auch auf diejenigen, an denen er möglicherweise nicht interessiert ist
Sarfraz
4

Ohne jQuery:

Sie brauchen jQuery nicht, wenn es so einfach ist, dies mit reinem JavaScript zu tun. Hier sind zwei Möglichkeiten:

  • Methode 1 - Rufen Sie den genauen Wert des hrefAttributs ab:

    Wählen Sie das Element aus und verwenden Sie die .getAttribute()Methode.

    Diese Methode gibt nicht die vollständige URL zurück, sondern ruft den genauen Wert des hrefAttributs ab.

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


  • Methode 2 - Rufen Sie den vollständigen URL-Pfad ab:

    Wählen Sie das Element aus und greifen Sie einfach auf die hrefEigenschaft zu .

    Diese Methode gibt den vollständigen URL-Pfad zurück.

    In diesem Fall : http://stacksnippets.net/relative/path.html.

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


Wie Ihr Titel andeutet, möchten Sie den hrefWert beim Klicken erhalten. Wählen Sie einfach ein Element aus, fügen Sie einen Listener für Klickereignisse hinzu und geben Sie den hrefWert mit einer der oben genannten Methoden zurück.

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
quelle
0

Code aktualisiert

$('a','div.res').click(function(){
  var currentAnchor = $(this);
  alert(currentAnchor.text());
  alert(currentAnchor.attr('href'));
});
rahul
quelle
das wird auf alle Links abzielen, auch auf diejenigen, an denen er möglicherweise nicht interessiert ist.
Sarfraz
Dies entspricht jedoch seinem Markup, in dem er keinen Klassennamen angegeben hat.
Rahul
Sie sollten ihn führen, wo eine Verbesserung möglich ist :)
Sarfraz
Ein möglicher Grund für die Ablehnung könnte sein, dass der Fragesteller nicht nach dem sucht, was Sie getan haben$('a','div.res')
Sarfraz
0

Alternative

Am Beispiel von Sarfraz oben.

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

Für href:

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