0

我正在设置一个页面，该页面具有指向不同文档的多个链接。由于链接的名称与它们链接的文档相匹配，我想我会编写一个脚本，该脚本采用带下划线的任何内容的内部 html，并在其周围生成一个链接标记，并在链接中输入每个特定的链接名称。

我编写的脚本运行良好，除了它只运行一次并更新所有链接，每个链接都有一个相同的链接。有没有办法让它接受每个实例并单独更改它们？

对不起，如果我扼杀了我的解释！

这是我当前的代码：

<u>Link1</u>
<u>Link2</u>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script>
innerU = $("u").html();
$("u").html("<a href=mywebsite.com/" + innerU + ".pdf>" + innerU + "</a>");
</script>
4

4 回答 4

4

您可以使用 jQuery 的each()将所需的转换应用于<u>页面中的每个元素。像这样的东西：

$("u").each(function() {
    var innerU = $(this).html();
    $(this).html("<a href='mywebsite.com/" + innerU + ".pdf'>" + innerU + "</a>");
});

编辑：在 href 值周围添加引号以生成有效的 HTML。感谢Kolink注意到。

于 2013-02-05T19:26:17.457 回答
3

试试这个：

(function() { // create a closure to avoid leaking variables
   var tags = document.getElementsByTagName("u"), l = tags.length, i, t, a;
   for( i=0; i<l; i++) {
      a = document.createElement('a');
      a.href = "http://mywebsite.com/"+tags[i].firstChild.nodeValue+".pdf";
      a.appendChild(tags[i].firstChild);
      tags[i].appendChild(a);
   }
})();

这更好有几个原因：

  1. 它是原生 JavaScript，因此运行速度快了数百倍
  2. 它使用闭包以避免变量污染全局范围
  3. 它使用 DOM 方法而不是innerHTML（这是 jQuery.html()使用的）
  4. 它将文本节点视为文本，如果您在其中有 HTML 实体，这一点很重要&eacute;。
于 2013-02-05T19:28:37.453 回答
1

这应该可以解决问题。

$("u").each(function () {

    var innerU = $(this).html();
    $(this).html("<a href=mywebsite.com/" + innerU + ".pdf>" + innerU + "</a>");

});

虽然，您的代码有很多“错误”。例如使用<u>标签生成链接？为什么不直接使用 anhors 并像这样动态设置它们的 href 属性：

<a href="#" class='coollink'>Link1</a>
<a href="#" class='coollink'>Link2</a>

<script>
$("a.coollink").each(function () {
    $(this).attr("href", "//mywebsite.com/" + $(this).html() + ".pdf");
});
</script>
于 2013-02-05T19:26:21.627 回答
-2

您可以使用JQuery 的.each()方法。

$('u').each(function(){
    innerU = $(this).html();
    $(this).html("<a href=mywebsite.com/" + innerU + ".pdf>" + innerU + "</a>");
});

例子

于 2013-02-05T19:33:48.420 回答