Come ottenere il testo di ancoraggio / href al clic utilizzando jQuery?


113

Considera che ho un'ancora simile a questa

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

NOTA: non ci sarà alcun ID o classe per l'ancora ...

Voglio ottenere href / text nel jQuery onclickdi quell'ancora.

Risposte:


242

Nota: applica la classe info_linka qualsiasi link da cui desideri ottenere le informazioni.

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

Per href:

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

Per il testo:

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

.

Aggiornamento basato sulla modifica della domanda

Puoi ottenerli in questo modo ora:

Per href:

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

Per il testo:

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

1
Questo si interromperà se un altro elemento ha il collegamento al nome della classe. Meglio specificare anche il selettore di tag.
rahul

@rahul: È divertente, non lo farà, la linkclasse dovrebbe essere per i link specifici da cui vuole ottenere informazioni.
Sarfraz

Ma cosa succede se c'è il seguente markup,<div class='link' />
rahul

@rahul: sta diventando di nuovo divertente, potrebbe dare ai suoi link un nome univoco.
Sarfraz

potresti usare this.hash invece di $ (this) .attr ('href')
meo

6

Modificato per riflettere l'aggiornamento alla domanda

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

che prenderà di mira tutti i link anche quelli a cui potrebbe non essere interessato
Sarfraz

4

Senza jQuery:

Non hai bisogno di jQuery quando è così semplice farlo usando JavaScript puro. Ecco due opzioni:

  • Metodo 1 - Recupera il valore esatto hrefdell'attributo:

    Seleziona l'elemento e quindi utilizza il .getAttribute()metodo.

    Questo metodo non restituisce l'URL completo, ma recupera il valore esatto hrefdell'attributo.

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


  • Metodo 2 - Recupera il percorso URL completo:

    Seleziona l'elemento e quindi accedi semplicemente alla hrefproprietà .

    Questo metodo restituisce il percorso completo dell'URL.

    In questo caso: http://stacksnippets.net/relative/path.html.

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


Come suggerisce il titolo, vuoi ottenere il hrefvalore al clic. Selezionare semplicemente un elemento, aggiungere un listener di eventi clic e quindi restituire il hrefvalore utilizzando uno dei metodi sopra menzionati.

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

Codice aggiornato

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

che avrà come target tutti i link, anche quelli a cui potrebbe non essere interessato.
Sarfraz

Ma questo è in base al suo markup in cui non ha specificato un nome di classe.
rahul

Dovresti guidarlo dove è possibile il miglioramento :)
Sarfraz

possibile motivo per il voto negativo potrebbe essere che l'interrogante non sta cercando quello che hai fatto con$('a','div.res')
Sarfraz

0

Alternativa

Usando l'esempio di Sarfraz sopra.

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

Per href:

$(function(){
  $('.res').on('click', '.info_link', function(){
    alert($(this)[0].href);
  });
});
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.