1267

आप jQuery का उपयोग करके हाइपरलिंक के लिए href कैसे बदल सकते हैं?

javascript jquery hyperlink

— ब्रायन बोटराइट
स्रोत

12

JQuery - stackoverflow.com/questions/179713/… के उपयोग के बिना समाधान के इच्छुक लोगों के लिए

— जोश क्रोज़िएर

1

नए jQuery के संस्करणों के लिए: stackoverflow.com/a/6348239/4928642

— Qwertiy

1

jQuery stackoverflow.com/a/39276418/696535 के

— पावेल

संभावित समाधानों की एक पूरी सूची, कुछ उपयोगी चयनकर्ताओं और रेगेक्स के मैचों के मूल्य प्राप्त करने के लिए और उन्हें अपडेट करने के लिए उपयोग करते हैं href: stackoverflow.com/a/49568546/1262248

— अमन छाबड़ा

1830

का उपयोग करते हुए

$("a").attr("href", "http://www.google.com/")

Google को इंगित करने के लिए सभी हाइपरलिंक के href को संशोधित करेगा। आप शायद कुछ अधिक परिष्कृत चयनकर्ता चाहते हैं। उदाहरण के लिए, यदि आपके पास लिंक स्रोत (हाइपरलिंक) और लिंक लक्ष्य (उर्फ "एंकर") एंकर टैग हैं:

<a name="MyLinks"></a>
<a href="http://www.codeproject.com/">The CodeProject</a>

... तो आप शायद गलती hrefसे उनके लिए विशेषताओं को जोड़ना नहीं चाहते हैं। सुरक्षा के लिए, हम यह निर्दिष्ट कर सकते हैं कि हमारा चयनकर्ता <a>मौजूदा hrefविशेषता के साथ केवल टैग से मिलान करेगा :

$("a[href]") //...

बेशक, आपके मन में शायद कुछ और दिलचस्प होगा। यदि आप किसी विशिष्ट मौजूदा एंकर के साथ मैच करना चाहते हैं href, तो आप कुछ इस तरह का उपयोग कर सकते हैं:

$("a[href='http://www.google.com/']").attr('href', 'http://www.live.com/')

इससे लिंक मिलेंगे जहां hrefवास्तव में स्ट्रिंग से मेल खाता है http://www.google.com/। एक और अधिक शामिल कार्य मेल खा सकता है, फिर केवल उसी भाग को अपडेट करना href:

$("a[href^='http://stackoverflow.com']")
   .each(function()
   { 
      this.href = this.href.replace(/^http:\/\/beta\.stackoverflow\.com/, 
         "http://stackoverflow.com");
   });

पहला भाग केवल उन लिंक का चयन करता है जहाँ href की शुरुआत होती है http://stackoverflow.com। फिर, एक फ़ंक्शन परिभाषित किया गया है जो URL के इस हिस्से को एक नए के साथ बदलने के लिए एक सरल नियमित अभिव्यक्ति का उपयोग करता है। ध्यान दें कि यह आपको देता है - लिंक के लिए किसी भी प्रकार का संशोधन यहां किया जा सकता है।

— Shog9
स्रोत

3

"HTML में, तत्व नाम केस-असंवेदनशील हैं, लेकिन XML में वे केस-संवेदी हैं।" - w3.org/TR/CSS21/selector.html

— eyelidlessness

47

पूर्णता के लिए, चूंकि यह अभी भी कभी-कभार जुड़ा हुआ है, इसलिए मैं जोड़ूंगा कि jQuery 1.4 के बाद से, अंतिम उदाहरण का उपयोग करने की आवश्यकता नहीं है each- निम्नलिखित अब संभव होगा:$(selector).attr('href', function() { return this.replace(/.../, '...'); });

— डेविड Hedlund

14

@DavidHedlund थोड़ा सा सुधार: तुम्हें याद किया href: ...return this.href.replace(/.../, '...'); });

— Armstrongest

280

JQuery 1.6 और इसके बाद के संस्करण के साथ आपको उपयोग करना चाहिए:

$("a").prop("href", "http://www.jakcms.com")

के बीच का अंतर propऔर attrवह यह है कि attrपकड़ लेता है, जबकि एचटीएमएल विशेषता propपकड़ लेता है डोम संपत्ति।

आप इस पोस्ट में अधिक जानकारी पा सकते हैं: .prop () बनाम .attr ()

— जेरोम
स्रोत

32

एक व्याख्या कारण है कि आप का उपयोग करना चाहिए propसे अधिक attrलोगों को इस सवाल का आ रहा है और खोजने के लिए, की सराहना की जाएगी attrजाहिरा तौर पर नए jQuery संस्करणों में पूरी तरह से ठीक काम कर रहा ...

— Womble

11

@womble का उपयोग इससे propतेज है attrक्योंकि यह HTML को संशोधित करने के बजाय डोम को अपडेट करता है। jsfiddle.net/je4G5

— पोपनूडल्स

2

@Popnoodles इससे कहीं अधिक मुद्दे हैं, लेकिन यहां उन सभी को समझाना बहुत लंबा होगा। तो पाठकों को सिर्फ पोस्ट वूमल से जुड़ी हुई बातों पर ध्यान देना चाहिए। हालांकि, यहाँ एक सारांश अच्छा होगा, अन्यथा इस तरह की जानकारी थोड़े खो जाती है ..

— Rauni Lillemets

78

attrअपने लुकअप पर विधि का उपयोग करें । आप किसी भी विशेषता को नए मूल्य के साथ बदल सकते हैं।

$("a.mylink").attr("href", "http://cupcream.com");

— पीटर शिनियर्स
स्रोत

2

यदि मैंने टैग में वर्ग = "mylink" सेट किया है तो यह मेरे लिए काम करता है। बस यह स्पष्ट करना चाहता था कि यदि कोई व्यक्ति ऊपर दिए गए उत्तर के समान नाम = "mylink" सेट करने की कोशिश करता है और यह काम करने की उम्मीद करता है।

— cpuguru

40

इस पर निर्भर करते हुए कि आप सभी समान लिंक को किसी और चीज़ में बदलना चाहते हैं या आप पृष्ठ के किसी दिए गए अनुभाग में या हर एक को अलग-अलग नियंत्रित करना चाहते हैं, आप इनमें से एक कर सकते हैं।

Google के सभी लिंक बदलें ताकि वे Google मानचित्र की ओर इशारा करें:

<a href="http://www.google.com">

$("a[href='http://www.google.com/']").attr('href', 
'http://maps.google.com/');

किसी दिए गए अनुभाग में लिंक बदलने के लिए, कंटेनर डिव के वर्ग को चयनकर्ता में जोड़ें। यह उदाहरण सामग्री में Google लिंक को बदल देगा, लेकिन पाद लेख में नहीं:

<div class="content">
    <p>...link to <a href="http://www.google.com/">Google</a>
    in the content...</p>
</div>

<div class="footer">
    Links: <a href="http://www.google.com/">Google</a>
</div>

$(".content a[href='http://www.google.com/']").attr('href', 
'http://maps.google.com/');

व्यक्तिगत लिंक को बदलने के लिए, चाहे वे दस्तावेज़ में कहीं भी हों, लिंक में एक आईडी जोड़ें और फिर उस आईडी को चयनकर्ता में जोड़ें। यह उदाहरण सामग्री में दूसरा Google लिंक बदल देगा, लेकिन पाद लेख में पहला या एक नहीं:

<div class="content">
    <p>...link to <a href="http://www.google.com/">Google</a>
    in the content...</p>
    <p>...second link to <a href="http://www.google.com/" 
        id="changeme">Google</a>
    in the content...</p>
</div>

<div class="footer">
    Links: <a href="http://www.google.com/">Google</a>
</div>

$("a#changeme").attr('href', 
'http://maps.google.com/');

— flamingLogos
स्रोत

36

_{भले ही ओपी ने स्पष्ट रूप से jQuery के जवाब के लिए कहा हो, आपको इन दिनों सब कुछ के लिए jQuery का उपयोग करने की आवश्यकता नहीं है।}

JQuery के बिना कुछ तरीके:

यदि आप सभी तत्वों के hrefमूल्य को बदलना चाहते हैं, तो उन सभी का चयन करें और फिर नोडेलिस्ट के माध्यम से पुनरावृति करें : (उदाहरण) <a>
```
var anchors = document.querySelectorAll('a');
Array.prototype.forEach.call(anchors, function (element, index) {
    element.href = "http://stackoverflow.com";
});
```
यदि आप वास्तव में एक विशेषता वाले hrefसभी <a>तत्वों के मूल्य को बदलना चाहते हैं, तो hrefउन्हें [href]विशेषता चयनकर्ता ( a[href]) जोड़कर चुनें : (उदाहरण)
```
var anchors = document.querySelectorAll('a[href]');
Array.prototype.forEach.call(anchors, function (element, index) {
    element.href = "http://stackoverflow.com";
});
```
यदि आप hrefउन <a>तत्वों के मूल्य को बदलना चाहते हैं जिनमें एक विशिष्ट मूल्य है, उदाहरण के लिए google.com, विशेषता चयनकर्ता का उपयोग करें a[href*="google.com"]: (उदाहरण)
```
var anchors = document.querySelectorAll('a[href*="google.com"]');
Array.prototype.forEach.call(anchors, function (element, index) {
    element.href = "http://stackoverflow.com";
});
```
इसी तरह, आप अन्य विशेषता चयनकर्ताओं का भी उपयोग कर सकते हैं । उदाहरण के लिए:
- a[href$=".png"]उन <a>तत्वों का चयन करने के लिए उपयोग किया जा सकता है जिनका hrefमूल्य समाप्त होता है .png।
- a[href^="https://"]उन <a>तत्वों का चयन करने के लिए इस्तेमाल किया जा सकता है जो उन hrefमूल्यों के साथ हैं जो पहले से उपसर्ग हैं https://।

यदि आप कई शर्तों को पूरा करने वाले तत्वों का hrefमूल्य बदलना चाहते <a>हैं: (उदाहरण)

var anchors = document.querySelectorAll('a[href^="https://"], a[href$=".png"]');
Array.prototype.forEach.call(anchors, function (element, index) {
    element.href = "http://stackoverflow.com";
});

.. ज्यादातर मामलों में regex की जरूरत नहीं है ।

— जोश क्रोज़ियर
स्रोत

9

जब क्लास 'menu_link' का लिंक क्लिक किया जाता है, तो यह स्निपेट आक्रमण करता है, और लिंक के टेक्स्ट और यूआरएल को दिखाता है। वापसी झूठी लिंक को फ़ॉलो करने से रोकती है।

<a rel='1' class="menu_link" href="option1.html">Option 1</a>
<a rel='2' class="menu_link" href="option2.html">Option 2</a>

$('.menu_link').live('click', function() {
   var thelink = $(this);
   alert ( thelink.html() );
   alert ( thelink.attr('href') );
   alert ( thelink.attr('rel') );

   return false;
});

— crafter
स्रोत

3

मुझे डाउन-वोट के बारे में बहुत अधिक जानकारी नहीं है, लेकिन अगर आप यह नहीं कहने जा रहे हैं कि आप डाउन-वोटिंग क्यों कर रहे हैं, तो कुछ हासिल नहीं हो रहा है, और आपको परेशान नहीं होना चाहिए।

— crafter

2

डाउन-वोट किया गया क्योंकि आपका स्निपेट और उत्तर मूल प्रश्न का उत्तर नहीं देता है, और वास्तव में कोई स्पष्टीकरण नहीं देता है कि स्निपेट का उपयोग करके प्राप्त जानकारी क्यों सहायक है।

— डेविड मिलर

5

डाउन वोटिंग यह पांडित्य है। उसने अपने उत्तर पर उतना प्रयास नहीं किया होगा जितना कि अन्य उपयोगकर्ताओं ने किया था लेकिन समस्या को हल करने के लिए उसने वास्तव में कोड प्रदान किया था। ओपी को बस कस्टम-मेड समाधान को कॉपी और पेस्ट करने के अलावा थोड़ा और विचार करने की आवश्यकता होगी।

— उलिस 20

8

ऐसा करने का सरल तरीका है:

Attr फ़ंक्शन (jQuery के संस्करण 1.0 के बाद से)

$("a").attr("href", "https://stackoverflow.com/")

या

प्रो फ़ंक्शन (jQuery संस्करण 1.6 के बाद से)

$("a").prop("href", "https://stackoverflow.com/")

इसके अलावा, उपरोक्त तरीके से लाभ यह है कि यदि चयनकर्ता एक एंकर का चयन करता है, तो यह केवल एंकर को अपडेट करेगा और यदि चयनकर्ता एंकर का एक समूह लौटाता है, तो यह केवल एक बयान के माध्यम से विशिष्ट समूह को अपडेट करेगा।

अब, सटीक एंकर या एंकर के समूह की पहचान करने के बहुत सारे तरीके हैं:

काफी आसान लोग:

टैग नाम के माध्यम से लंगर का चयन करें: $("a")
अनुक्रमणिका के माध्यम से लंगर का चयन करें: $("a:eq(0)")
विशिष्ट कक्षाओं के लिए एंकर का चयन करें (जैसा कि इस क्लास में केवल एंकर क्लास के साथ होता है active ):$("a.active")
विशिष्ट आईडी के साथ एंकर का चयन करना (यहां उदाहरण में profileLink आईडी में):$("a#proileLink")
पहले लंगर href का चयन: $("a:first")

अधिक उपयोगी:

सभी तत्वों को href विशेषता के साथ चुनना: $("[href]")
विशिष्ट href के साथ सभी एंकर का चयन करना: $("a[href='www.stackoverflow.com']")
उन सभी एंकरों का चयन करना जिनके पास विशिष्ट href नहीं है: $("a[href!='www.stackoverflow.com']")
विशिष्ट URL वाले href के साथ सभी एंकर का चयन करना: $("a[href*='www.stackoverflow.com']")
विशिष्ट URL से शुरू होने वाले href के साथ सभी एंकर का चयन करना: $("a[href^='www.stackoverflow.com']")
विशिष्ट URL के साथ href समाप्त होने वाले सभी एंकर का चयन करना: $("a[href$='www.stackoverflow.com']")

अब, यदि आप विशिष्ट URL में संशोधन करना चाहते हैं, तो आप निम्न कार्य कर सकते हैं:

उदाहरण के लिए, यदि आप google.com पर जाने वाले सभी URL के लिए प्रॉक्सी वेबसाइट जोड़ना चाहते हैं, तो आप इसे निम्नानुसार लागू कर सकते हैं:

$("a[href^='http://www.google.com']")
   .each(function()
   { 
      this.href = this.href.replace(/http:\/\/www.google.com\//gi, function (x) {
        return "http://proxywebsite.com/?query="+encodeURIComponent(x);
    });
   });

— अमन छाबड़ा
स्रोत

6

सिर्फ इसके लिए jQuery का उपयोग करना बंद करो! यह केवल जावास्क्रिप्ट के साथ इतना सरल है।

document.querySelector('#the-link').setAttribute('href', 'http://google.com');

https://jsfiddle.net/bo77f8mg/1/

— पावेल
स्रोत

8

पर्याप्त नहीं jQuery।

— मल्कियर

3

 $("a[href^='http://stackoverflow.com']")
   .each(function()
   { 
      this.href = this.href.replace(/^http:\/\/beta\.stackoverflow\.com/, 
         "http://stackoverflow.com");
   });

— अनूप
स्रोत

2

वर्डप्रेस Avada थीम लोगो छवि के HREF बदलें

यदि आप ShortCode Exec PHP प्लगइन स्थापित करते हैं, तो आप इस शॉर्टकोड को बना सकते हैं जिसे मैंने myjavascript कहा है

?><script type="text/javascript">
jQuery(document).ready(function() {
jQuery("div.fusion-logo a").attr("href","tel:303-985-9850");
});
</script>

अब आप सूरत / विजेट पर जा सकते हैं और एक पाद विजेट क्षेत्रों को चुन सकते हैं और निम्नलिखित शोर्ट को जोड़ने के लिए एक पाठ विजेट का उपयोग कर सकते हैं

[myjavascript]

चयनकर्ता आपकी छवि का उपयोग करने के आधार पर बदल सकता है और यदि यह रेटिना के लिए तैयार है, लेकिन आप डेवलपर्स टूल का उपयोग करके इसे हमेशा समझ सकते हैं।

— कूपर
स्रोत

2

href एक विशेषता में, इसलिए आप इसे शुद्ध जावास्क्रिप्ट का उपयोग करके बदल सकते हैं, लेकिन अगर आपके पास पहले से ही आपके पेज में jQuery का इंजेक्शन है, तो चिंता न करें, मैं इसे दोनों तरीकों से दिखाऊंगा:

कल्पना कीजिए कि आपके पास यह hrefनीचे है:

<a id="ali" alt="Ali" href="http://dezfoolian.com.au">Alireza Dezfoolian</a>

और आप इसे लिंक बदलना पसंद करते हैं ...

किसी भी पुस्तकालय के बिना शुद्ध जावास्क्रिप्ट का उपयोग आप कर सकते हैं:

document.getElementById("ali").setAttribute("href", "https://stackoverflow.com");

लेकिन यह भी jQuery में आप कर सकते हैं:

$("#ali").attr("href", "https://stackoverflow.com");

या

$("#ali").prop("href", "https://stackoverflow.com");

इस स्थिति में, यदि आपने पहले ही jQuery का इंजेक्शन लगाया है, तो शायद jQuery एक छोटा और अधिक क्रॉस-ब्राउज़र दिखता है ... लेकिन इसके अलावा मैं JSएक के साथ जाता हूं ...

— एलिरेज़ा
स्रोत

JQuery का उपयोग करके हाइपरलिंक के लिए href कैसे बदलें

JQuery के बिना कुछ तरीके:

वर्डप्रेस Avada थीम लोगो छवि के HREF बदलें