如何使用jQuery更改具有特定“href”的链接的“href”属性？

Question

如果一个页面有多个链接，例如：

<a href="http://www.domain.com/linka.html">Link A</a>
<a href="http://www.domain.com/linkb.html">Link B</a>
<a href="http://www.domain.com/linkc.html">Link C</a>
<a href="http://www.domain.com/linkd.html">Link D</a>

在页面加载时如何将它们全部更改为以下内容：

<a href="http://www.domain.com/folder/linka.html">Link A</a>
<a href="http://www.domain.com/folder/linkb.html">Link B</a>
<a href="http://www.domain.com/folder/linkc.html">Link C</a>
<a href="http://www.domain.com/folder/linkd.html">Link D</a>

- Sam

Answer 1

你需要使用 [name^=”value”] 选择器选择所有 href 属性以 "link" 开头，并使用 [name$=”value”] 选择器选择以 ".html" 结尾的锚点。然后使用 .attr(function) 迭代选择的元素并在函数中更改它们的 href 属性。保留 html 标签。

$("a[href^='link'][href$='.html']").attr("href", function(i, attr){
    return "folder/" + attr;
});

$("a[href^='link'][href$='.html']").attr("href", function(i, attr){
  return "folder/" + attr;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="linka.html">Link A</a>
<a href="linkb.html">Link B</a>
<a href="linkc.html">Link C</a>
<a href="linkd.html">Link D</a>

您可以在$(document).ready(function(){//code})中编写代码，以在页面加载后运行。

- Mohammad

---

您可以检查文件是否为 .html 文件。 - Alexis

Answer 2

$.each($("a[href^='link'][href$='.html']"),function(){
$(this).attr("href",document.URL+"folder/"+$(this).attr("href"))
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="linka.html">Link A</a>
<a href="linkb.html">Link B</a>
<a href="linkc.html">Link C</a>
<a href="linkd.html">Link D</a>

- Jacopo Brovida

---

这会在http://的开头添加url，导致链接无效。我已经更新了原始帖子。 - Sam