रनटाइम पर href विशेषता सेट करना

Question

JQuery का उपयोग करके रन टाइम hrefमें <a>टैग की विशेषता सेट करने का सबसे अच्छा तरीका क्या है ?

इसके अलावा, आपको jQuery का उपयोग करके टैग की hrefविशेषता का मूल्य कैसे मिलेगा <a>?

Answer 1

HTML एलिमेंट की एक विशेषता को पाने या सेट करने के लिए, आप element.attr()jQuery में फंक्शन का उपयोग कर सकते हैं ।

Href विशेषता प्राप्त करने के लिए , निम्नलिखित कोड का उपयोग करें:

var a_href = $('selector').attr('href');

Href विशेषता सेट करने के लिए, निम्नलिखित कोड का उपयोग करें:

$('selector').attr('href','http://example.com');

दोनों मामलों में, कृपया उपयुक्त चयनकर्ता का उपयोग करें। यदि आपने लंगर तत्व के लिए कक्षा निर्धारित की है, तो उपयोग करें '.class-name'और यदि आपने लंगर तत्व के लिए आईडी निर्धारित की है, तो उपयोग करें '#element-id'।

Comments

मैंने इसका उपयोग href प्राप्त करने के लिए किया। चेतावनी ($ ( "# प्रकाशित-लिंक") attr ( "href")।); और इसने मुझे "अपरिभाषित" चेतावनी दी।

— गौतमलकुम

इसका शायद मतलब है कि आपका प्रकाशन-लिंक एक आईडी के बजाय एक वर्ग है। कोशिश: चेतावनी ($ ("। प्रकाशित-लिंक")। attr ("href")); इसके बजाय

— जिम टोलन

@ lakum4stackof: यदि आप सटीक पोस्ट कर रहे हैं तो यह मदद करेगा <a> टैग आप यहाँ उपयोग कर रहे हैं :)

आह क्षमा करें। तुम सही हो। मैंने कक्षा लागू की है और मैंने jquery कोड में '#' का उपयोग किया है। इसने चेतावनी के साथ काम किया ($ ("। प्रकाशित-लिंक")। attr ("href")); बहुत बहुत धन्यवाद। :)

— गोतलामकुम

Answer 2

JQuery 1.6+ में इसका उपयोग करना बेहतर है:

$(selector).prop('href',"http://www...")करने के लिए सेट मूल्य, और

$(selector).prop('href')मान प्राप्त करने के लिए

संक्षेप में, DOM ऑब्जेक्ट .propपर मान प्राप्त करता है और सेट करता है , और HTML में मान प्राप्त करता है और सेट करता है । यह कुछ संदर्भों में थोड़ा तेज और संभवतः अधिक विश्वसनीय बनाता है।.attr.prop

Comments

सहमत '.प्रॉप' को पूर्ण पथ मिलेगा जैसे: http: //www.../index.html जबकि .attr केवल मिलेगा: 'index.html'

— DevWL

Answer 3

के hrefसाथ विशेषता सेट करें

$(selector).attr('href', 'url_goes_here');

और इसका उपयोग करके पढ़ें

$(selector).attr('href');

जहां "चयनकर्ता" आपके <a>तत्व के लिए कोई भी मान्य jQuery चयनकर्ता है (".myClass" या "#myId" सबसे सरल नाम रखने के लिए)।

उम्मीद है की यह मदद करेगा !

Comments

मैंने इसका उपयोग href प्राप्त करने के लिए किया है। चेतावनी ($ ( "# प्रकाशित-लिंक") attr ( "href")।); और इसने मुझे "अपरिभाषित" चेतावनी दी।

— गौतमलकुम

@ lakum4stackof आपने सबसे अधिक संभावना यह बताई है कि hrefआपके चयनकर्ता सही है, यह मानते हुए कि आपने अपनी विशेषता सेट कर ली है।

— वैलेंटाइन फ्लैशेल

कोशिश: चेतावनी ($ ("। प्रकाशित-लिंक")। attr ("href")); जैसा कि आपका तत्व आईडी के बजाय एक वर्ग हो सकता है। वास्तव में, शायद $ का उपयोग कर रहे हैं (यह) यदि यह आपके इवेंट के अंदर है

— jim tollan

Answer 4

तीन समाधानों के लिए लघु प्रदर्शन परीक्षण तुलना:

1. $(".link").prop('href',"https://example.com")
2. $(".link").attr('href',"https://example.com")
3. document.querySelector(".link").href="https://example.com";

यहां आप अपने आप को https://jsperf.com/a-href-js-change द्वारा परीक्षण कर सकते हैं

---

हम निम्नलिखित तरीकों से href मान पढ़ सकते हैं

1. let href = $(selector).prop('href');
2. let href = $(selector).attr('href');
3. let href = document.querySelector(".link").href;

यहां आप खुद से https://jsperf.com/a-href-js-read टेस्ट कर सकते हैं

Comments

अच्छा! अजीब तरह से, मुझे आपके विपरीत परिणाम मिल रहे हैं, लेकिन उन्हें स्वयं चलाने में सक्षम होना दिलचस्प है।

— होल्डऑफ ह्यूंगर

@HoldOffHunger हाँ - बहुत दिलचस्प है - आपकी मशीन, ओएस और ब्राउज़र क्या है?

— कामिल कीवल्स्कीस्की

FF59, Win10। परिणाम फिर से थोड़े बदले हुए प्रतीत होते हैं (शायद यह टैब के # खुलने पर निर्भर करता है), लेकिन फिर भी अधिकतर समान: imgur.com/a/MLDnTWM मशीन: 10 साल पुराना इंटेल बोर्ड (dp55wg), 3.1 जीएचजी क्वाड-कोर, 16gb ddr3 ram, gtx1070

— होल्डऑफहुंगेर

Answer 5

<style>
a:hover {
    cursor:pointer;
}
</style>

<script type="text/javascript" src="lib/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $(".link").click(function(){
        var href = $(this).attr("href").split("#");
        $(".results").text(href[1]);
    })
})
</script>



<a class="link" href="#one">one</a><br />
<a class="link" href="#two">two</a><br />
<a class="link" href="#three">three</a><br />
<a class="link" href="#four">four</a><br />
<a class="link" href="#five">five</a>


<br /><br />
<div class="results"></div>

Comments

कोड-ओनली उत्तर उतने सहायक नहीं होते हैं जितने उत्तर कार्य कोड और सहायक स्पष्टीकरण होते हैं। इस मामले में, यह 5 साल की उम्र में इस उत्तर को समझा जाएगा।

— सोमनाथ मुलुक