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>

Answer 2

您可以使用点击，因为您使用的是jquery

$( ".link" ).click(function(){
 //do something here
alert('clicked');
});

https://api.jquery.com/click/

Answer 3

考虑一下：

＆＃13;

$( ".list-inline li" ).each(function() {
    $( this ).css( "color", "red" ).html('<a href="#'+$(this).text()+'">'+$(this).text()+'</a>');
});

＆＃13;

<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>

＆＃13;

但也许你不想要真正的链接，但只需点击<li> s？

＆＃13;

$('.list-inline').on('click', 'li', function(event) {
  alert("Go to link");
})
.find('li').css({cursor:'pointer'});

＆＃13;

<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>

＆＃13;

Answer 4

您可以使用.html()方法的回调函数：

$( ".link" ).html(function(i , oldhtml) {
  return "<a href='someref"+oldhtml+"'>"+oldhtml+"</a>"
});

Answer 5

您可以使用'wrapInner'函数执行此操作：

$("ul.list-inline li").wrapInner(function() {
    return "<a href='somepage.html'></a>";
});

虽然如果您有权访问源代码来更改类，但不确定为什么不只是对链接进行编码...

Answer 6

这是你要找的吗？

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

$( ".list-inline li" ).each(function() {
    $( this ).css( "color", "red" );
    var country = $(this).text();
    $(this).html('<a href="yourlink">'+country+'</a>');
});

演示：http://jsfiddle.net/6cjex8b2/

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

6 个答案: