在所有的href网址中追加新路径 [英] Append new path in all the a href URL

问题描述

我看过帖子如何更新（附加到）jQuery中的href？，但似乎没有答案可以帮助我的情况。

我目前使用插件easytab）创建几个不同的选项卡，每个选项卡包含一个标签，如< a id =tabopenhref =www.text.com/custom/questions/ask />

< a id =tabopenhref =www.text.com/default/questions/ask /> ;

出于某种原因，我有一个按钮，它为所有的href添加一些额外的路径，以便将用户重定向到正确的位置。

我试过使用

  $（a＃tab1 ）.each（function（）{
 var _href = $（this）.attr（href）; 
 $（this）.attr（href，_href +'startDate = 20160121？ endDate = 20160212'）; 
}）; 
  

而是附加'startDate = 20160121？endDate = 20160212' code>它将一切都替换为 www.text.com/custom/questions/ask/startDate=20160121?endDate=20160212 ，这是不对的，我应该如何修正它？

更新1：
我很抱歉，我提供了错误的描述，ids实际上是相同的插件。

< a id =tabopenhref =www.text.com/custom/questions/ask />

< a id =tabopenhref =www.text.com/default/questions/ask /> $ $（a＃tab1） 选择ID为 tab1 单个 < a> 元素C>。要更改单个元素的 href 属性，每个不需要。

  var href = $（'a＃tab1'）。attr（'href'）+'？startDate = 20160121& endDate = 20160212'; 
 $（'a＃tab1'）。attr（'href'，href）; 
  

如果有多个ID相同的元素， ID应该是唯一的。

要选择所有以 tab 开头的元素，可以使用属性以选择器开始。我建议在它们上使用一个独特的类。

要更改所有匹配的 href 属性值元素 .attr（attributeName，function）

  $（'a [id ^ =tab]' ）.attr（'href'，function（i，oldHref）{
 return oldHref +'？startDate = 20160121& endDate = 20160212'; 
}）; 
  





---





正如@charlietfl 在

 '？ startDate = 20160121& endDate = 20160212'
 ^ ^ 
  

---

更新：

再说一次， ID应该是唯一的。，您可以使用class而不是ID为类似目的的元素。

更改标记以使用class

 < a class =tabopenhref =www.text.com/custom/questions/ask /> 
 
< a class =tabopenhref =www.text.com/default/questions/ask /> 
  

然后使用选择器

<$ p $ $（'。tabopen'）。something ...


不良做法：

如果您无法更改标记（由某个插件自动生成标记），那么您可以使用属性值选择器来选择所有具有相同ID的元素。

  $（'a [id =tabopen]'）。 ... 
  

I have seen the post How to update (append to) an href in jquery? , but it doesn't seem like the answer can help at my case.

I am currently using a plugin(easytab) to create a few different tab and every tab contains a tag like <a id="tabopen" href="www.text.com/custom/questions/ask/">

<a id="tabopen" href="www.text.com/default/questions/ask/">

and for some reason I have a button which append some extra path to all the href in order to redirect user to the right place.

I have tried to use

$("a#tab1").each(function() {
   var _href = $(this).attr("href"); 
   $(this).attr("href", _href + 'startDate=20160121?endDate=20160212');
});

but instead append the 'startDate=20160121?endDate=20160212' it replace everything to www.text.com/custom/questions/ask/startDate=20160121?endDate=20160212 , which is not right, how should i fix it?

Update 1: I am sorry that i have provide wrong description at, the ids are actually the same in the plugin.

<a id="tabopen" href="www.text.com/custom/questions/ask/">

<a id="tabopen" href="www.text.com/default/questions/ask/">

解决方案

$("a#tab1") selects a single <a> element having ID as tab1. To change the href attribute of a single element there is no need of each.

var href = $('a#tab1').attr('href') + '?startDate=20160121&endDate=20160212';
$('a#tab1').attr('href', href);

If having multiple elements with same ID, ID should be unique.

To select all the elements whose ID starts with tab, you can use attribute start with selector. I'll suggest to use a unique class on them.

To change the href attribute value of all the matched elements .attr(attributeName, function) with callback function can be used.

$('a[id^="tab"]').attr('href', function(i, oldHref) {
    return oldHref + '?startDate=20160121&endDate=20160212';
});

---

As said by @charlietfl in the comment, the querystring format should be as follow

'?startDate=20160121&endDate=20160212'
 ^                  ^

---

Update:

Saying again, ID should be unique., you can use class instead of ID for similar purpose elements.

Change the markup to use class

<a class="tabopen" href="www.text.com/custom/questions/ask/">

<a class="tabopen" href="www.text.com/default/questions/ask/">

And then use the selector

$('.tabopen').something...

BAD PRACTICE:

If you can't change the markup(auto-generated markup by some plugin), you can use attribute value selector to select all elements having same ID

$('a[id="tabopen"]').something...

这篇关于在所有的href网址中追加新路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！