آموزش تغییر دادن href لینک ها با jQuery

گاهی اوقات نیاز میشه که طی شرایطی آدرس لینکهای سایت رو تغییر بدیم. در این مطلب میخوایم به کمک jQuery مبحث تغییر دادن href لینک‌ها رو مدیریت کنیم و کارهای مورد نظرمون رو انجام بدیم.

کد زیر رو ببینید:

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

این کد، href تمام لینک‌های موجود رو به http://www.google.com تبدیل می‌کنه. اما ممکنه گاهی اوقات تگ‌های a رو مورد استفاده قرار بدین که در اونا از href استفاده نشده باشه و برای مقاصد دیگه مورد استفاده قرار گرفته باشن. با روش بالا اون لینک‌ها هم انتخاب میشن و ویژگی href به اونا اضافه میشه و کار رو خراب میکنه. پس باید انتخابگر رو خاصتر کنیم تا فقط اون لینکهایی که href دارن رو انتخاب کنیم و فقط اونا رو تغییر بدیم. مثلا لینکهای زیر رو ببینید:

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

همونطور که میبینید تگ a اول اصلا ویژگی href نداره و فقط names برای اون تعریف شده است. پس میتونیم کدی که در ابتدا برای تغییر لینک استفاده کردیم رو بصورت زیر تغییر بدیم:

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

با اینکار فقط اون لینکهایی که ویژگی href دارن با تغییر مواجه میشن.

ممکنه شما بخواید کارهای جالب‌تری رو انجام بدید. به عنوان مثال، در بین href‌های موجود اون هایی که دقیقا با  http://www.google.com مطابقت دارند رو انتخاب کنید و این آدرس رو با http://www.live.com تعویض کنید. به این منظور می‌تونید از کد زیر استفاده کنید:

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

حتی شما می‌تونید این مسئله رو خاص‌تر کنید و فقط زمانی که فقط بخشی از href‌های موجود با href مورد نظرتون یکسان بود اون بخش رو با href  خاصی جایگزین کنه:

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

به عنوان نمونه در این کد ابتدا href هایی که با http://stackoverflow.com شروع شدن انتخاب میشن و بعد از اون با استفاده از متد replace به ابتدای آدرس اونا یک beta اضافه میکنیم. با اینکار همه لینکهایی که با http://stackoverflow.com شروع میشدن یک beta به اولشون اضافه میشه و بصورت http://beta.stackoverflow.com میشن.

چه امتیازی به این مقاله می دید؟

1 2 3 4 5