使用jQuery在锚链接之前添加当前页面URL

Question

I am stuck utilizing a platform (Nationbuilder) that automatically adds the base tag in the header. It didn't until recently and now the dozens of pages with anchor links end up sending the user to the homepage.

I need to use jQuery to add the current page's url before the #anchor. The closest I can find is the following code, but I have no idea how to modify it so ONLY links with a href attribute starting with a # are modified:

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

So I would like:

<a href="#anchorname"></a>

To be changed to:

<a href="http://www.example.com/pageslug#anchorname"></a>

Answer 1

You can use the CSS attribute starts with selector:

Instead of selecting "a" , select 'a[href^="#"]' meaning "a tags with an href attribute starting with # .

So something like:

$('a[href^="#"]').each(function(i,el){
    el.href = "http://www.example.com/pageslug" + el.hash;
});

(fiddle)

Answer 2

One addition to what Benjamin said, you'll need to capture the current href for each of the anchors, which means you need a loop. So

$('a[href^="#"]').each(function(index, element){
    var $ele = $(element),
        oldHref = $ele.attr('href');
    $ele.attr('href', '//example.com/page'+ oldHref);
});

Answer 3

像这样吗

$('a').attr('href', window.location.pathname + this.attr('href'))