转换& lt; li>文本转换成可点击的链接

Convert <li> text into a clickable link

本文关键字：转换 链接 文本 lt li      更新时间：2023-09-26

我有一个场景，我需要将一系列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's(虽然理想情况下，我希望能够"瞄准"UL，然后它的孩子消除需要class="link"…但那是另一回事!)，在这种情况下，只是改变文本的颜色，但我不知道如何将文本更改为链接。

有谁能给我点建议吗?

谢谢,克雷格

您可以使用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>

你可以使用click，因为你正在使用jquery

$( ".link" ).click(function(){
 //do something here
alert('clicked');
});
https://api.jquery.com/click/

考虑一下:

$( ".list-inline li" ).each(function() {
    $( this ).css( "color", "red" ).html('<a href="#'+$(this).text()+'">'+$(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>

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

$('.list-inline').on('click', 'li', function(event) {
  alert("Go to link");
})
.find('li').css({cursor:'pointer'});
<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>

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

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

您可以使用'wrapInner'函数来完成此操作:

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

虽然如果您可以访问源代码来更改类，但不确定为什么不直接对链接进行编码…

这是你要找的吗?

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

相关文章：