通过javascript将url变量添加到href链接

时间:2016-01-22 16:52:52

标签: javascript jquery html

我的页面上有以下链接,但是当页面通过javascript加载时,我想为它们添加一些url变量。

链接:

<a href="http://www.test.com/home/">Home</a>
<a href="http://www.test.com/business/">Business</a>
<a href="http://www.test.com/commercial/">Commercial</a>

想要将它们更改为:

<a href="http://www.test.com/home?city=miami&tel=7777777777">Home</a>
<a href="http://www.test.com/business?city=miami&tel=7777777777">Business</a>
<a href="http://www.test.com/commercial?city=miami&tel=7777777777">Commercial</a>

我在任何href链接上都没有id,所以我无法弄清楚如何在html中找到它们。有人可以帮我解决这个问题。

谢谢

更新 - 来自HTML的SNIPPET

<div class="menu_wrapper">
<nav id="menu" class="menu-960px-grid-container"><ul id="menu-960px-grid" class="menu"><li id="menu-item-3064" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-67 current_page_item"><a href="http://www.test.com/Home/"><span>Home</span></a></li>
<li id="menu-item-3042" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://www.test.com/business/"><span>Business</span></a></li>
<li id="menu-item-3043" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://www.test.com/commercial/"><span>Commercial</span></a></li>
</ul></nav><a class="responsive-menu-toggle " href="#"><i class="icon-menu"></i></a>                    
                </div>

3 个答案:

答案 0 :(得分:0)

使用jQuery,您可以循环页面中的每个a标记,然后删除其href的最后一个字符,最后附加?city=miami&tel=7777777777

$(function() {
    $("a").each(function(i, v) {
        var href = $(v).attr("href");
        href = href.substr(0, href.length - 1) + "?city=miami&tel=7777777777";
        $(v).attr("href", href);
    });
})

<强>更新

由于您更新了HTML代码,因此在您的id代码中添加了a个属性&#39;父母,您只需更改jQuery选择器即可将上述规则应用于每个规则:

$(function() {
    $("#menu-item-3064 a, #menu-item-3042 a, #menu-item-3043 a").each(function(i, v) {
        var href = $(v).attr("href");
        href = href.substr(0, href.length - 1) + "?city=miami&tel=7777777777";
        $(v).attr("href", href);
    });
})

答案 1 :(得分:0)

通过for迭代它们。做同样的检查。以下是没有jquery要求的。

// This is your array of links to find and change
var linksToChange = ["http://asdf.com/home/", "http://asdf.com/busi/", "http://asdf.com/test/"]

// some external vars
var city = "miami",
  tel = "7777777";

// Generate your string to add
var stringToAdd = "?city=" + city + "&tel=" + tel;

// Get all "a" tags
var links = document.getElementsByTagName("a");

for(var i = 0; i<links.length; i++) {
  for (var j = 0; j < linksToChange.length; j++) {
    if (linksToChange[j] == links[i].href) {
      // Modify link here
      links[i].href = links[i].href.slice(0,-1) + stringToAdd;
    }
  }
}
<a href="http://asdf.com/home/">1</a>
<a href="http://asdf.com/busi/">2</a>
<a href="http://asdf.com/other/">3</a>
<a href="http://asdf.com/more/">4</a>
<a href="http://asdf.com/test/">5</a>

答案 2 :(得分:0)

您可以使用<supports-screens android:anyDensity="true" android:largeScreens="true" android:normalScreens="true" android:smallScreens="true" android:xlargeScreens="true" /> <compatible-screens> <screen android:screenDensity="ldpi" android:screenSize="small" /> <screen android:screenDensity="mdpi" android:screenSize="small" /> <screen android:screenDensity="hdpi" android:screenSize="small" /> <screen android:screenDensity="xhdpi" android:screenSize="small" /> <screen android:screenDensity="560" android:screenSize="normal" /> <screen android:screenDensity="480" android:screenSize="normal" /> <screen android:screenDensity="480" android:screenSize="large" /> <screen android:screenDensity="560" android:screenSize="large" /> <screen android:screenDensity="640" android:screenSize="large" /> </compatible-screens> 循环播放它们并使用attr(fn)作为选择器

$('#menu a')

或者,$('#menu a').attr('href', function(index, oldHref){ return oldHref +'?city=miami&tel=7777777777' }); 代码具有<a>属性

search

创建查询字符串的一种简单方法是使用$.param()

$('#menu a').each(function(){
   this.search = 'city=miami&tel=7777777777';
});