使用jQuery克隆href属性值

Question

我想知道是否有人可以帮助我？我想克隆每个链接的属性值，并使用jQuery附加到span。

我有这段代码：

<a href="http://www.site1.com">
<h3>Site1</h3>
</a>

<a href="http://www.site2.com">
<h3>Site2</h3>
</a>

<a href="http://www.site3.com">
<h3>Site3</h3>
</a>

我想这样做：

<a href="http://www.site1.com">
<span class="link">http://www.site1.com</span>
<h3>Site1</h3>
</a>

<a href="http://www.site2.com">
<span class="link">http://www.site2.com</span>
<h3>Site2</h3>
</a>

<a href="http://www.site3.com">
<span class="link">http://www.site3.com</span>
<h3>Site3</h3>
</a>

Answer 1

您可以使用 each() 和 prepend()

1. each() 迭代a代码
的方法
2. prepend() 在开头添加内容

。

＆＃13;
＆＃13;
$('a').each(function() {
  $(this).prepend($('<span/>', {
    class: 'link',
    html: this.href
  }));
});
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a href="http://www.site1.com">
  <h3>Site1</h3>
</a>

<a href="http://www.site2.com">
  <h3>Site2</h3>
</a>

<a href="http://www.site3.com">
  <h3>Site3</h3>
</a>
＆＃13;
＆＃13;
＆＃13;

或者您可以使用带回调的 prepend() 进行迭代

＆＃13;
＆＃13;
$('a').prepend(function() {
  return $('<span/>', {
    class: 'link',
    html: this.href
  });
});
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a href="http://www.site1.com">
  <h3>Site1</h3>
</a>

<a href="http://www.site2.com">
  <h3>Site2</h3>
</a>

<a href="http://www.site3.com">
  <h3>Site3</h3>
</a>
＆＃13;
＆＃13;
＆＃13;