1267

আপনি কীভাবে jQuery ব্যবহার করে হাইপারলিংকের href পরিবর্তন করতে পারেন?

javascript jquery hyperlink

— ব্রায়ান বোটরাইট
সূত্র

12

আপনারা যারা jQuery ব্যবহার না করে সমাধানগুলিতে আগ্রহী তাদের জন্য - stackoverflow.com/questions/179713/…

— জোশ ক্রোজায়ার

1

নতুন jQuery এর সংস্করণ এর জন্য: stackoverflow.com/a/6348239/4928642

— Qwertiy

1

jQuery স্ট্যাকওভারফ্লো.com

— পাভেল

সম্ভাব্য সমাধানগুলির একটি সম্পূর্ণ তালিকা, কিছু দরকারী নির্বাচক এবং রেইগেক্সের ম্যাচের মান পাওয়ার উপায় এবং href আপডেট করার জন্য তাদের ব্যবহার করুন: stackoverflow.com/a/49568546/1262248

— আমান ছাবরা

1830

ব্যবহার

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

গুগলকে নির্দেশ করতে সমস্ত হাইপারলিংকের 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। তারপরে, এমন একটি ফাংশন সংজ্ঞায়িত করা হয়েছে যা ইউআরএলের এই অংশটিকে নতুনের সাথে প্রতিস্থাপন করতে একটি সাধারণ নিয়মিত অভিব্যক্তি ব্যবহার করে। এটি আপনাকে যে নমনীয়তা দেয় তা নোট করুন - লিঙ্কটিতে যে কোনও ধরণের পরিবর্তন এখানে করা যেতে পারে।

— Shog9
সূত্র

3

"এইচটিএমএলতে, উপাদানগুলির নামগুলি কেস-সংবেদনশীল তবে এক্সএমএলে এগুলি কেস-সংবেদনশীল।" - w3.org/TR/CSS21/selector.html

— চোখের পলকহীনতা

47

সম্পূর্ণতার জন্য, যেহেতু এটি এখনও মাঝেমধ্যে সংযুক্ত করা হচ্ছে, আমি যুক্ত করব যে jQuery 1.4, যেহেতু শেষ উদাহরণটি ব্যবহারের দরকার নেই each- নিম্নলিখিতগুলি এখন সম্ভব হবে:$(selector).attr('href', function() { return this.replace(/.../, '...'); });

— ডেভিড হেডলন্ড

14

@ ডেভিডহেল্ড হালকা সংশোধন: আপনি মিস করেছেন href: ...return this.href.replace(/.../, '...'); });

— আর্মস্ট্রোনস্ট

280

JQuery 1.6 এবং এর উপরে আপনার ব্যবহার করা উচিত:

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

propএবং এর মধ্যে পার্থক্যটি attrহ'ল attrএইচটিএমএল বৈশিষ্ট্যটি propধরে রাখে যেখানে ডিওএম সম্পত্তিটি ধরে নেয়।

আপনি এই পোস্টে আরও বিশদ খুঁজে পেতে পারেন: .প্রপ () বনাম .ttr ()

— জেরোম
সূত্র

32

আপনার কেন propঅতিরিক্ত ব্যবহার করা উচিত তার একটি ব্যাখ্যা attrপ্রশংসিত হবে, কারণ লোকেরা প্রশ্নে আসে এবং attrনতুন jQuery সংস্করণগুলিতে দৃশ্যত পুরোপুরি সূক্ষ্মভাবে কাজ করছে ...

— 3

11

@ উম্বলে ব্যবহার propকরা দ্রুততর attrকারণ এটি এইচটিএমএল পরিবর্তনের পরিবর্তে ডোম আপডেট করে। jsfiddle.net/je4G5

— পপনুডলস

2

@ পোপনুডলস এর চেয়ে আরও বেশি সমস্যা রয়েছে তবে এগুলি এখানে ব্যাখ্যা করা খুব দীর্ঘ হবে। পাঠকদের কেবল লিঙ্কযুক্ত পোস্টে নজর দেওয়া উচিত। যাইহোক, এখানে একটি সংক্ষিপ্ত বিবরণ চমৎকার হবে, অন্যথায় এই ধরনের তথ্য হারিয়ে যায় ..

— রাউনি লিলমেট

78

আপনার দেখার attrপদ্ধতিটি ব্যবহার করুন । আপনি কোনও নতুন মান সহ যে কোনও বৈশিষ্ট্য স্যুইচআউট করতে পারেন।

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

— পিটার শিনার্স
সূত্র

2

আমি যদি ট্যাগটিতে ক্লাস = "মাইলিঙ্ক" সেট করি তবে এটি আমার পক্ষে কাজ করেছে। কেবলমাত্র স্পষ্ট করে বলতে চেয়েছিলেন যে ক্ষেত্রে যদি উপরের উত্তরের মতো কোনও নাম = "মাইলিঙ্ক" সেট করার চেষ্টা করে এবং এটি কাজ করে বলে প্রত্যাশা করে।

— সিপিগুরু

40

আপনি অন্য কোনও কিছুর সাথে সমস্ত অভিন্ন লিঙ্ক পরিবর্তন করতে চান বা পৃষ্ঠার প্রদত্ত বিভাগে বা প্রতিটি পৃথকভাবে প্রতিটিটির উপর নিয়ন্ত্রণ রাখতে চান কিনা তার উপর নির্ভর করে, আপনি এর মধ্যে একটি করতে পারেন।

সমস্ত লিঙ্ক গুগলে পরিবর্তন করুন যাতে তারা গুগল মানচিত্রের দিকে ইঙ্গিত করে:

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

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

প্রদত্ত বিভাগে লিঙ্কগুলি পরিবর্তন করতে, ধারক ডিভের শ্রেণিটি নির্বাচককে যুক্ত করুন। এই উদাহরণটি সামগ্রীটিতে গুগল লিঙ্কটি পরিবর্তন করবে, তবে পাদলেখ নয়:

<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/');

স্বতন্ত্র লিঙ্কগুলি নথিতে যেখানেই পড়ে তা পরিবর্তনের জন্য, লিঙ্কটিতে একটি আইডি যুক্ত করুন এবং তারপরে নির্বাচকটিতে সেই আইডি যুক্ত করুন। এই উদাহরণটি সামগ্রীতে দ্বিতীয় গুগল লিঙ্কটি পরিবর্তন করবে, তবে পাদদেশের প্রথমটি বা একটিকে নয়:

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

.. বেশিরভাগ ক্ষেত্রে , রেইগেক্সের প্রয়োজন নেই ।

— জোশ ক্রোজিয়ার
সূত্র

9

ক্লাসের একটি লিঙ্ক 'মেনু_লিংক' ক্লিক করা হয় এবং লিঙ্কটির পাঠ্য এবং url দেখায় এই স্নিপেট আহবান করে। প্রত্যাবর্তন মিথ্যা লিঙ্কটি অনুসরণ করা থেকে বিরত করে।

<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

ডাউন-ভোটিং সম্পর্কে আমি খুব প্যাডেন্টিক নই, তবে আপনি কেন নীচে ভোট দিচ্ছেন তা বলার অপেক্ষা রাখে না, তবে কিছুই পাওয়া যাচ্ছে না এবং আপনার মাথা ঘামানো উচিত নয়।

— 5:55

2

নিচে ভোট দেওয়া হয়েছে কারণ আপনার স্নিপেট এবং উত্তরটি মূল প্রশ্নের উত্তর দেয় না এবং স্নিপেট ব্যবহার করে প্রাপ্ত তথ্য কেন সহায়ক তা তার কোনও ব্যাখ্যা সরবরাহ করে না।

— ডেভিড মিলার

5

ডাউন-ভোটিং এটি পেডেন্টিক। অন্যান্য ব্যবহারকারীদের মতো তিনি তার উত্তরের পক্ষে ততটা প্রচেষ্টা নাও করতে পারেন তবে তিনি সমস্যা সমাধানের জন্য কোড সরবরাহ করেছেন। কাস্টম-তৈরি সমাধানটি অনুলিপি করা এবং আটকানোর পাশাপাশি ওপিকে আরও কিছুটা চিন্তা করা দরকার।

— উলিস

8

এটি করার সহজ উপায় হ'ল:

অ্যাট্রিক ফাংশন (যেহেতু 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']")
নির্দিষ্ট ইউআরএলযুক্ত href সহ সমস্ত অ্যাঙ্কর নির্বাচন করা: $("a[href*='www.stackoverflow.com']")
নির্দিষ্ট ইউআরএল দিয়ে href সহ সমস্ত অ্যাঙ্কর নির্বাচন করা: $("a[href^='www.stackoverflow.com']")
নির্দিষ্ট ইউআরএল সহ href সমাপ্ত সমস্ত অ্যাঙ্কর নির্বাচন করা: $("a[href$='www.stackoverflow.com']")

এখন, আপনি যদি নির্দিষ্ট ইউআরএল সংশোধন করতে চান তবে আপনি এটি হিসাবে এটি করতে পারেন:

উদাহরণস্বরূপ, যদি আপনি google.com এ যাওয়া সমস্ত ইউআরএলগুলির জন্য প্রক্সি ওয়েবসাইট যুক্ত করতে চান তবে আপনি নীচে এটি প্রয়োগ করতে পারেন:

$("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/

— Pawel
সূত্র

8

পর্যাপ্ত jQuery নয়।

— ম্যালকিয়ার

3

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

— অনুপ
সূত্র

2

ওয়ার্ডপ্রেস আভাদা থিম লোগো চিত্রের এইচআরইএফ পরিবর্তন করুন

আপনি যদি শর্টকোড এক্সিকিউট পিএইচপি প্লাগইন ইনস্টল করেন তবে আপনি এই শর্টকোডটি তৈরি করতে পারেন যা আমি মাইজভাস্ক্রিপ্ট বলেছি

?><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 ছাড়াই কয়েকটি পদ্ধতি:

ওয়ার্ডপ্রেস আভাদা থিম লোগো চিত্রের এইচআরইএফ পরিবর্তন করুন