Question

我的网页上有一些链接：

<a href="http://test1.com">Test 1</a>
<a href="http://test2.com">Test 2</a>
<a href="http://test3.com">Test 3</a>
<a href="http://test4.com">Test 4</a>

我希望在每个链接后添加href属性 jquery 。实际上我想在我的网页上有这样的东西：

Test 1 (http://test1.com)
Test 2 (http://test2.com)
Test 3 (http://test3.com)
Test 4 (http://test4.com)

Answer 1

试试这个：您可以使用jQuery修改链接的html，如下所示 -

＆＃13;

$(function(){
  $('a').each(function(){
     //take link text
     var text = $(this).html();
     var href = ' (' + $(this).attr('href') + ')';
     //edit link text with href
     $(this).html(text + href );
  });

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<a href="http://test1.com">Test 1</a>
<a href="http://test2.com">Test 2</a>
<a href="http://test3.com">Test 3</a>
<a href="http://test4.com">Test 4</a>

＆＃13;

Answer 2

将当前HTML与其href连接，然后再次将其设置为html。

＆＃13;

$(function() {

  $("a").each(function() {
    this.innerHTML = this.innerHTML + " (" + this.href + ")";
  });

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="http://test1.com">Test 1</a><br>
<a href="http://test2.com">Test 2</a><br>
<a href="http://test3.com">Test 3</a><br>
<a href="http://test4.com">Test 4</a><br>

＆＃13;

Answer 3

请参阅$('tagName')选择器返回jQuery对象的集合，这样您就可以在每个锚点上直接使用.text(fn)方法，并使用具有两个参数(index, text)的回调函数。当前元素的索引和第二个索引是它的text值。

您可以使用.text(fn)在href附加每个锚点的文字：

＆＃13;

$('a').text(function(i, txt){
   return txt + ' (' +$(this).attr('href')+')'
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="http://test1.com">Test 1</a><br>
<a href="http://test2.com">Test 2</a><br>
<a href="http://test3.com">Test 3</a><br>
<a href="http://test4.com">Test 4</a><br>

＆＃13;

Answer 4

jquery .atrr（）就是您的答案

这是w3schools的一个例子：它是如何工作的： http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_dom_attr_set 代码也在

之下

$(document).ready(function(){
    $("button").click(function(){
        $("#w3s").attr("href", "http://www.w3schools.com/jquery");
    });
});

使用jquery在每个链接后添加链接位置

4 个答案: