jQuery를 사용하여 클릭시 앵커 텍스트 / href를 얻는 방법은 무엇입니까?


113

다음과 같은 앵커가 있다고 생각해

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

참고 : 앵커에 대한 ID 또는 클래스는 없습니다.

onclick해당 앵커 의 jQuery에서 href / text를 얻고 싶습니다 .

답변:


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

@rahul : 재미 있습니다. 그렇지 않습니다. link수업은 그가 정보를 얻고 자하는 특정 링크를위한 것이어야 합니다.
Sarfraz

하지만 다음 마크 업이 있다면 <div class='link' />
어떨까요?

@rahul : 다시 재미있어지고 있습니다. 그는 자신의 링크에 고유 한 이름을 부여 할 수 있습니다.
Sarfraz

대신 $의 this.hash (이) .attr ( 'HREF') 사용할 수 있습니다
MEO

6

질문에 대한 업데이트를 반영하도록 수정 됨

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

관심이없는 링크까지도 모든 링크를 타겟팅합니다.
Sarfraz

4

jQuery없이 :

순수한 JavaScript를 사용하여이 작업을 수행하는 것이 매우 간단 할 때는 jQuery가 필요 하지 않습니다 . 두 가지 옵션이 있습니다.

  • 방법 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'));
});

관심이없는 링크까지 모든 링크를 대상으로합니다.
Sarfraz

그러나 이것은 그가 클래스 이름을 지정하지 않은 그의 마크 업에 따른 것입니다.
rahul

개선이 가능한 곳에서 그를 안내해야합니다. :)
Sarfraz

당신이 한 일을 아래쪽 투표에 대한 가능한 이유는 질문자가 찾고되지 수$('a','div.res')
Sarfraz

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);
  });
});
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.