كيفية تغيير href لارتباط تشعبي باستخدام jQuery

Question

كيف يمكنك تغيير href لارتباط تشعبي باستخدام jQuery؟

Answer 1

وعن طريق

$("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. ثم، يتم تعريف وظيفة يستخدم تعبير عادي بسيط لاستبدال هذا الجزء من URL مع واحدة جديدة. ملاحظة المرونة وهذا يوفر لك - أي نوع من التعديل لرابط يمكن القيام به هنا

Answer 2

ومع مسج 1.6 فما فوق يجب عليك استخدام:

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

والفرق بين prop وattr هو أن attr العناوين الرئيسية للصحف السمة HTML حين prop الاستيلاء على الممتلكات DOM.

ويمكنك العثور على مزيد من التفاصيل في هذا المنصب: .prop () مقابل .attr ()

Answer 3

استخدم طريقة attr على البحث الخاص بك. يمكنك التبديل من أي سمة مع قيمة جديدة.

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

Answer 4

واعتمادا على ما إذا كنت ترغب في تغيير جميع الروابط متطابقة إلى شيء آخر أو تريد السيطرة على مجرد تلك الموجودة في قسم معين من الصفحة أو كل واحد على حدة، يمكنك أن تفعل واحدة من هذه.

وتغيير جميع الروابط إلى Google حتى يشيرون إلى خرائط Google:

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

لتغيير الروابط الفردية بغض النظر عن مكان وقوعها في الوثيقة، إضافة معرف إلى الارتباط وثم أضيف أن id لمحدد. هذا المثال تغيير رابط جوجل الثاني في المحتوى، ولكن ليس أول واحد أو واحدة في تذييل الصفحة:

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

Answer 5

_{على الرغم من أن 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.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، في معظم حالات.

Answer 6

وهذه قصاصة استدعاء عند وصلة من "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;
});

Answer 7

والتوقف عن استخدام مسج فقط من أجل ذلك! هذا هو بسيط جدا مع جافا سكريبت فقط.

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

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

Answer 8

الطريقة البسيطة للقيام بذلك هي:

وظيفة أتر (منذ الإصدار 1.0 من jQuery)

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

أو

وظيفة الدعامة (منذ الإصدار 1.6 من jQuery)

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

أيضًا، ميزة الطريقة المذكورة أعلاه هي أنه إذا اختار المحدد مرساة واحدة، فسوف يقوم بتحديث هذا المرساة فقط وإذا أعاد المحدد مجموعة من المرساة، فسوف يقوم بتحديث المجموعة المحددة من خلال عبارة واحدة فقط.

الآن، هناك الكثير من الطرق لتحديد المرساة الدقيقة أو مجموعة المراسي:

أشياء بسيطة جدًا:

1. حدد المرساة من خلال اسم العلامة: $("a")
2. حدد المرساة من خلال الفهرس: $("a:eq(0)")
3. حدد مرساة لفئات محددة (كما في هذه الفئة فقط مرساة مع الفصل active) : $("a.active")
4. تحديد المراسي بمعرف محدد (هنا في المثال profileLinkبطاقة تعريف) : $("a#proileLink")
5. تحديد المرساة الأولى href: $("a:first")

المزيد منها مفيدة:

6. تحديد جميع العناصر ذات السمة href : $("[href]")
7. تحديد جميع المراسي ذات href المحدد: $("a[href='www.stackoverflow.com']")
8. تحديد جميع المراسي التي لا تحتوي على href محدد: $("a[href!='www.stackoverflow.com']")
9. تحديد جميع المراسي التي تحتوي على href الذي يحتوي على عنوان URL محدد: $("a[href*='www.stackoverflow.com']")
10. تحديد جميع نقاط الارتساء باستخدام href بدءًا من عنوان URL محدد: $("a[href^='www.stackoverflow.com']")
11. تحديد جميع نقاط الارتساء التي تنتهي بـ href بعنوان URL محدد: $("a[href$='www.stackoverflow.com']")

الآن، إذا كنت تريد تعديل عناوين URL محددة، فيمكنك القيام بذلك على النحو التالي:

على سبيل المثال، إذا كنت تريد إضافة موقع ويب وكيل لجميع عناوين URL التي تنتقل إلى 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);
    });
   });

Answer 9

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

Answer 10

قم بتغيير HREF لصورة شعار WordPress Avada Theme

إذا قمت بتثبيت البرنامج المساعد ShortCode Exec PHP، فيمكنك إنشاء هذا الرمز القصير الذي أسميته myjavascript

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

يمكنك الآن الانتقال إلى Appearance/Widgets واختيار إحدى مناطق عناصر واجهة المستخدم في التذييل واستخدام عنصر واجهة المستخدم النصي لإضافة الرمز القصير التالي

[myjavascript]

قد يتغير المحدد اعتمادًا على الصورة التي تستخدمها وما إذا كانت جاهزة لشبكية العين ولكن يمكنك دائمًا اكتشاف ذلك باستخدام أدوات المطورين.

Answer 11

href في إحدى السمات، حتى تتمكن من تغييرها باستخدام جافا سكريبت خالص، ولكن إذا قمت بالفعل بإدخال jQuery في صفحتك، فلا تقلق، فسوف أعرضها في كلا الاتجاهين:

تخيل أن لديك هذا href أقل:

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

وتحب تغير الرابط ...

استخدام جافا سكريبت النقي بدون أي مكتبة يمكنك القيام بما يلي:

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

ولكن أيضا في مسج يمكنك ان تفعل:

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

أو

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

في هذه الحالة، إذا قمت بالفعل بحقن jQuery، فمن المحتمل أن يبدو jQuery one أقصر وأكثر عبر المتصفحات...ولكن بخلاف ذلك سأختار JS واحد...