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

Question

Считайте, что у меня есть якорь, который выглядит следующим образом

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

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

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

Answer 1

Примечание: Примените класс 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());
  });
});

Answer 2

Отредактировано с учетом обновления вопроса

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

Answer 3

без 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>

Answer 4

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

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

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

Answer 5

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

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