javascript - 将 文本转换为可点击的链接

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()使用回调编写内部 anchor 元素，无需 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>