将<li>文本转换为可点击的链接

Question

我有一个场景(我不会厌烦你的细节)我需要将一系列li的文本转换为可点击的链接(所有这些都转到相同的目标URL).例如:

<ul class="list-inline">
<li class="link">Australia</li>
<li class="link">Fiji</li>
<li class="link">Oman</li>
<li class="link">Venezuela</li>
</ul>

我希望将这些国家/地区转换为可点击的链接.

使用:

$( ".link" ).each(function() {
    $( this ).css( "color", "red" );
});

我可以循环使用li(虽然理想情况下我希望能够'定位'UL然后它的孩子不再需要class ="link"......但这是另一回事!)在这种情况下简单更改文本的颜色,但我不知道如何将文本更改为链接.

有人有机会给我一些指示吗？

谢谢,克雷格

Answer 1

您可以使用html()来编写内部锚元素,而无需each()使用回调

$('.link').html(function() {
  return '<a href="url">' + $(this).text() + '</a>';
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="list-inline">
  <li class="link">Australia</li>
  <li class="link">Fiji</li>
  <li class="link">Oman</li>
  <li class="link">Venezuela</li>
</ul>