JQuery භාවිතා කරමින් හයිපර්ලින්ක් සඳහා href වෙනස් කරන්නේ කෙසේද


1281

JQuery භාවිතා කරමින් හයිපර්ලින්ක් සඳහා වන href වෙනස් කරන්නේ කෙසේද?


12
JQuery භාවිතයෙන් තොරව විසඳුම් ගැන ඔබ උනන්දුවක් දක්වන අයට - stackoverflow.com/questions/179713/…
ජොෂ් ක්‍රොසියර්

1
නවතම jQuery අනුවාද සඳහා: stackoverflow.com/a/6348239/4928642
Qwertiy

1
jQuery තොරව ඉතාමත් සරල උදාහරණයක් stackoverflow.com/a/39276418/696535
Pawel

1
හැකි විසඳුම් පිළිබඳ සම්පූර්ණ ලැයිස්තුවක්, ප්‍රයෝජනවත් තේරීම් කිහිපයක් සහ රීජෙක්ස්
අමන්

Answers:


1849

භාවිතා කිරීම

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

ගූගල් වෙත යොමු කිරීම සඳහා සියලු අධි-සබැඳි වල හරය වෙනස් කරයි. ඔබට තරමක් පිරිපහදු කළ තේරීම් කාරකයක් අවශ්‍ය විය හැක. උදාහරණයක් ලෙස, ඔබ සතුව සබැඳි ප්‍රභවයක් (හයිපර්ලින්ක්) සහ සම්බන්ධක ඉලක්කය (හෝ "නැංගුරම") නැංගුරම් ටැග් තිබේ නම්:

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

එහි පළමු කොටස තේරීම පමණක් සබැඳි කොහෙද තියෙන <a> ආරම්භ සමඟ http://stackoverflow.com. URL හි මෙම කොටස නව එකක් සමඟ ප්‍රතිස්ථාපනය කිරීම සඳහා සරල නිත්‍ය ප්‍රකාශනයක් භාවිතා කරන ශ්‍රිතයක් අර්ථ දැක්වේ. මෙය ඔබට ලබා දෙන නම්‍යශීලී බව සැලකිල්ලට ගන්න - සබැඳියේ ඕනෑම ආකාරයක වෙනස් කිරීමක් මෙහි කළ හැකිය.


3
"HTML හි, මූලද්‍රව්‍ය නම් අකුරු සංවේදී නොවේ, නමුත් XML හි ඒවා සිද්ධි සංවේදී වේ." - w3.org/TR/CSS21/selector.html
අක්ෂි රහිත බව

48
සම්පූර්ණත්වය සඳහා, මෙය තවමත් ඉඳහිට සම්බන්ධ වී ඇති හෙයින්, jQuery 1.4 සිට, අවසාන උදාහරණය භාවිතා කිරීම අවශ්‍ය නොවන බව මම එකතු කරමි each- පහත සඳහන් දෑ දැන් කළ හැකි වනු ඇත:$(selector).attr('href', function() { return this.replace(/.../, '...'); });
ඩේවිඩ් හෙඩ්ලන්ඩ්

15
Av ඩේවිඩ්හෙඩ්ලන්ඩ් සුළු නිවැරදි කිරීම: ඔබට මඟ හැරුණි href: ...return this.href.replace(/.../, '...'); });
ආම්ස්ට්‍රෝංගස්ට්

284

JQuery 1.6 සහ ඊට ඉහළින් ඔබ භාවිතා කළ යුත්තේ:

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

අතර වෙනස propහා attrබවයි attrHTML වලින් විශේෂණය ෙහයින්ද, සතුටින් පුරවමින්prop විශ්ලේෂණයට DOM දේපල පුරවමින්.

ඔබට මෙම ලිපියෙන් වැඩි විස්තර සොයාගත හැකිය: .prop () එදිරිව .attr ()


32
ඔබ propවැඩිපුර භාවිතා කළ යුත්තේ ඇයිද යන්න පැහැදිලි කිරීමක් attrඅගය කරනු ඇත, මන්ද attr
යත්

11
HTML වෙනස් කිරීම වෙනුවට ඩොම් යාවත්කාලීන කරන නිසා om වොම්බල් භාවිතය propවේගවත් වේ attr. jsfiddle.net/je4G5
පොප්නූඩ්ල්ස්

2
Op පොප්නූඩ්ල්ස් ඊට වඩා ගැටළු ඇත, නමුත් ඒවා සියල්ලම මෙහි පැහැදිලි කිරීමට තරම් දිගු වේ. එබැවින් පා readers කයන්ට පශ්චාත් ගර්භාෂය සම්බන්ධ වී ඇති ආකාරය දෙස බැලිය යුතුය. කෙසේ වෙතත්, මෙහි සාරාංශයක් හොඳයි, නැතිනම් මෙම තොරතුරු ටිකක් නැති වී යයි ..
රවුනි ලිලෙමෙට්ස්

79

attrඔබගේ බැලීමේ ක්‍රමය භාවිතා කරන්න . ඔබට නව අගයක් සහිත ඕනෑම ලක්ෂණයක් මාරු කළ හැකිය.

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

2
මම ටැගය තුළ class = "mylink" සකසන්නේ නම් මෙය මට ප්‍රයෝජනවත් විය. යමෙක් ඉහත පිළිතුරට සමාන නමක් = “මයිලින්ක්” සැකසීමට උත්සාහ කර එය ක්‍රියාත්මක වනු ඇතැයි අපේක්ෂා කරන්නේ නම් එය පැහැදිලි කිරීමට අවශ්‍යය.
cpuguru

41

ඔබට සමාන සියලුම සබැඳි වෙනත් දෙයකට වෙනස් කිරීමට අවශ්‍යද යන්න හෝ පිටුවේ යම් කොටසක ඇති ඒවා පමණක් හෝ එක් එක් ඒවා තනි තනිව පාලනය කිරීමට ඔබට අවශ්‍යද යන්න මත පදනම්ව, ඔබට මේවායින් එකක් කළ හැකිය.

ගූගල් වෙත සියලු සබැඳි වෙනස් කරන්න එවිට ඒවා ගූගල් සිතියම් වෙත යොමු කරයි:

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

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

දී ඇති කොටසක සබැඳි වෙනස් කිරීමට, බහාලුම් div පන්තිය තේරීම් කාරකයට එක් කරන්න. මෙම උදාහරණය අන්තර්ගතයේ ගූගල් සබැඳිය වෙනස් කරයි, නමුත් පාදකයේ නොවේ:

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

38

OP පැහැදිලිවම 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.coma[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>සහිත මූලද්‍රව්‍ය තෝරා ගැනීමට භාවිතා කළ හැකිය .hrefhttps://

  • ඔබට විවිධ කොන්දේසි සපුරාලන මූලද්‍රව්‍යවල 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

පංතියේ 'මෙනු_ලින්ක්' සබැඳියක් ක්ලික් කළ විට මෙම ස්නිපටය ක්‍රියාත්මක වන අතර සබැඳියේ පෙළ සහ යූආර්එල් පෙන්වයි. නැවත පැමිණීම අසත්‍යය සබැඳිය අනුගමනය කිරීමෙන් වළක්වයි.

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

3
මම ඡන්දය ප්‍රකාශ කිරීම ගැන එතරම් තැකීමක් නොකරමි, නමුත් ඔබ ඡන්දය ප්‍රකාශ කරන්නේ මන්දැයි ඔබ නොකියන්නේ නම්, කිසිවක් අත්කර ගත නොහැකි අතර ඔබ කරදර නොවිය යුතුය.
ක්‍රාෆ්ටර්

2
ඔබගේ ඡන්ද පත්‍රිකාව සහ පිළිතුර මුල් ප්‍රශ්නයට පිළිතුරු නොදෙන නිසාත්, ස්නිපටය භාවිතයෙන් ලබාගත් තොරතුරු ප්‍රයෝජනවත් වන්නේ මන්ද යන්න පිළිබඳ කිසිදු පැහැදිලි කිරීමක් සැබවින්ම ලබා නොදෙන නිසාත් ඡන්දය ප්‍රකාශ කර ඇත.
ඩේවිඩ් මිලර්

5
පහත් ඡන්දය ප්‍රකාශ කිරීම මෙය අශෝභන ය. ඔහු / ඇය අනෙක් පරිශීලකයින් මෙන් ඔහුගේ පිළිතුරට එතරම් උත්සාහයක් නොගෙන ඇති නමුත් ඔහු / ඇය ඇත්ත වශයෙන්ම ගැටළුව විසඳීම සඳහා කේතයක් ලබා දී ඇත. අභිරුචි-සාදන ලද විසඳුමක් පිටපත් කිරීම හා ඇලවීම හැරුණු විට OP හට තව ටිකක් සිතා බැලිය යුතුය.
උලීස්

8

එසේ කළ හැකි සරලම ක්‍රමය නම්:

Attr ශ්‍රිතය (jQuery අනුවාදය 1.0 සිට)

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

හෝ

මුක්කු ක්‍රියාකාරිත්වය (jQuery අනුවාදය 1.6 සිට)

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

ඉහත ක්‍රමයේ ඇති වාසිය නම්, තේරීම්කරු තනි නැංගුරමක් තෝරා ගන්නේ නම්, එය එම නැංගුරම පමණක් යාවත්කාලීන කරනු ඇති අතර තේරීම්කරු නැංගුරම් කණ්ඩායමක් ආපසු ලබා දෙන්නේ නම්, එය එක් ප්‍රකාශයක් මගින් පමණක් නිශ්චිත කණ්ඩායම යාවත්කාලීන කරනු ඇත.

දැන්, නිශ්චිත නැංගුරම හෝ නැංගුරම් සමූහය හඳුනා ගැනීමට බොහෝ ක්‍රම තිබේ:

ඉතා සරල අය:

  1. ටැග් නම හරහා නැංගුරම තෝරන්න: $("a")
  2. දර්ශකය හරහා නැංගුරම තෝරන්න: $("a:eq(0)")
  3. විශේෂිත පන්ති සඳහා නැංගුරම තෝරන්න (මෙම පන්තියේ මෙන් පන්තිය සමඟ නැංගුරම් පමණක් active):$("a.active")
  4. විශේෂිත හැඳුනුම්පතක් සහිත නැංගුරම් තෝරා ගැනීම (මෙහි උදාහරණ profileLink ID):$("a#proileLink")
  5. පළමු නැංගුරම තෝරාගැනීම: $("a:first")

වඩාත් ප්‍රයෝජනවත් ඒවා:

  1. Href ගුණාංගය සහිත සියලුම අංග තෝරා ගැනීම: $("[href]")
  2. විශේෂිත href සහිත සියලුම නැංගුරම් තෝරා ගැනීම: $("a[href='www.stackoverflow.com']")
  3. නිශ්චිත href නොමැති සියලුම නැංගුරම් තෝරා ගැනීම: $("a[href!='www.stackoverflow.com']")
  4. විශේෂිත URL අඩංගු href සහිත සියලුම නැංගුරම් තෝරා ගැනීම: $("a[href*='www.stackoverflow.com']")
  5. විශේෂිත URL වලින් ආරම්භ වන href සමඟ සියලුම නැංගුරම් තෝරා ගැනීම: $("a[href^='www.stackoverflow.com']")
  6. විශේෂිත URL සමඟ අවසන් වන සියලු නැංගුරම් තෝරා ගැනීම: $("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);
    });
   });

7

JQuery භාවිතා කිරීම නවත්වන්න. මෙය ජාවාස්ක්‍රිප්ට් සමඟ පමණක් සරල ය.

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

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


8
ප්‍රමාණවත් jQuery නොමැත.
malckier

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

2

වර්ඩ්ප්‍රෙස් ඇවාඩා තේමා ලාංඡන රූපයේ HREF වෙනස් කරන්න

ඔබ ෂෝට්කෝඩ් එක්සෙක් පීඑච්පී ප්ලගිනය ස්ථාපනය කළහොත් ඔබට මෙම කෙටි කේතය නිර්මාණය කළ හැකිය.

?><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එක සමඟ යන්නෙමි ...


By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.