Как получить текст привязки / href при нажатии с помощью jQuery?


113

Представьте, что у меня есть якорь, который выглядит так

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

ПРИМЕЧАНИЕ: для якоря не будет идентификатора или класса ...

Я хочу получить либо href / text в jQuery onclickэтого якоря.

Ответы:


242

Примечание: примените класс info_linkк любой ссылке, по которой вы хотите получить информацию.

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

Для href:

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

Для текста:

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

.

Обновление на основе вопроса Править

Получить их сейчас можно так:

Для href:

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

Для текста:

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

1
Это сломается, если у другого элемента есть ссылка на имя класса. Лучше также указать селектор тегов.
Рахул

@rahul: Забавно, это не так, linkкласс должен быть для конкретных ссылок, по которым он хочет получать информацию.
Sarfraz

Но что, если там есть следующая разметка,<div class='link' />
rahul

@rahul: снова становится смешно, он мог давать своим ссылкам любое уникальное имя.
Sarfraz

вы можете использовать this.hash вместо $ (this) .attr ('href')
meo

6

Отредактировано, чтобы отразить обновление вопроса

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

который будет нацелен на все ссылки, даже те, которые ему могут неинтересны
Sarfraz

4

Без jQuery:

Вам не нужен jQuery, если это так просто сделать с помощью чистого JavaScript. Вот два варианта:

  • Метод 1 - получить точное значение hrefатрибута:

    Выберите элемент, а затем используйте .getAttribute()метод.

    Этот метод не возвращает полный URL-адрес, вместо этого он получает точное значение hrefатрибута.

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


  • Метод 2 - получить полный путь URL:

    Выберите элемент, а затем просто перейдите к hrefсвойству .

    Этот метод возвращает полный URL-путь.

    В этом случае: http://stacksnippets.net/relative/path.html.

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


Как следует из названия, вы хотите получать hrefценность при нажатии. Просто выберите элемент, добавьте прослушиватель событий щелчка и затем верните hrefзначение, используя любой из вышеупомянутых методов.

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

Обновленный код

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

это будет нацелено на все ссылки, даже те, которые ему могут быть неинтересны.
Сарфраз

Но это согласно его разметке, в которой он не указал имя класса.
rahul

Вы должны направить его туда, где возможно улучшение :)
Сарфраз,

возможной причиной голосования против может быть то, что спрашивающий не интересуется тем, с чем вы натворили$('a','div.res')
Сарфраз,

0

Альтернатива

Используя пример из Sarfraz выше.

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

Для href:

$(function(){
  $('.res').on('click', '.info_link', function(){
    alert($(this)[0].href);
  });
});
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.