JQuery का उपयोग करके क्लिक पर लंगर पाठ / href कैसे प्राप्त करें?

Question

गौर कीजिए कि मेरे पास एक लंगर है जो इस तरह दिखता है

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

नोट: लंगर के लिए कोई आईडी या वर्ग नहीं होगा ...

मैं onclickउस एंकर के jQuery में या तो href / टेक्स्ट प्राप्त करना चाहता हूं ।

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

Comments

यह तब टूटेगा जब किसी अन्य तत्व में वर्ग नाम लिंक होगा। टैग चयनकर्ता को भी निर्दिष्ट करने के लिए बेहतर है।

— राहुल

@ उरुल: यह मज़ेदार है, यह नहीं होगा, linkकक्षा को उन विशिष्ट लिंक के लिए होना चाहिए जो वह जानकारी प्राप्त करना चाहता है।

— सरफराज

लेकिन अगर निम्नलिखित मार्कअप हो तो क्या होगा,<div class='link' />

— राहुल

@ प्रहुल: यह फिर से मजाकिया हो रहा है, वह अपने लिंक को कोई भी अनोखा नाम दे सकता है।

— सरफराज

आप के बजाय $ के this.hash (यह) .attr ( 'href') इस्तेमाल कर सकते हैं

— Meo

Answer 2

प्रश्न को अद्यतन प्रतिबिंबित करने के लिए संपादित

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

Comments

वह भी सभी लिंक को लक्षित करेगा, यहां तक ​​कि वह दिलचस्पी नहीं ले सकता है

— सरफराज

Answer 3

बिना jQuery के:

शुद्ध जावास्क्रिप्ट का उपयोग करते हुए ऐसा करने के लिए आपको 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>

Answer 4

अद्यतन कोड

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

Comments

वह सभी लिंक को लक्षित करेगा, यहां तक ​​कि वह जिसमें दिलचस्पी नहीं ले सकता है।

— सरफराज

लेकिन यह उनके मार्कअप के अनुसार है जिसमें उन्होंने एक वर्ग का नाम निर्दिष्ट नहीं किया है।

— राहुल

आपको उसका मार्गदर्शन करना चाहिए जहां सुधार संभव है :)

— सरफराज

डाउन वोट का संभावित कारण यह हो सकता है कि प्रश्नकर्ता यह नहीं खोज रहा है कि आपने क्या किया है$('a','div.res')

— सरफराज

Answer 5

विकल्प

ऊपर सरफराज से उदाहरण का उपयोग करना।

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