jQuery，从列表中获取每个值并用<a href=“same value”>包装

jQuery, get each value from a list and wrap it with <a href="same value">

本文关键字：href same value 包装 获取 列表 jQuery      更新时间：2023-09-26

我有四个列表

<li class='lists'>http://google.com</li>
<li class='lists'>http://facebook.com</li>
<li class='lists'>http://twitter.com</li>
<li class='lists'>http://youtube.com</li>

我想用列表中值中的值href=在此列表的值周围包装一个a标签。

我试图实现的最终结果是：

<li class='lists'><a href="http://google.com">http://google.com</a></li>
<li class='lists'><a href="http://facebook.com">http://facebook.com</a></li>
<li class='lists'><a href="http://twitter.com">http://twitter.com</a></li>
<li class='lists'><a href="http://youtube.com">http://youtube.com</a></li>

到目前为止，我用jQuery做了

$('li.lists').wrapInner('<a class="links"> </a>');

它用a标签将内容包装在li内，但我在如何将链接放入a字段中的逻辑上有点不足。

我试过

$.each($('.links'), function() {
  $('.links').attr({'href':$(this).text()});
})

但是这会将所有链接更改为最后一个链接http://youtube.com，正如您在 JSFiddle 中看到的那样

您可以继续使用 wrapInner。只需使用以下语法：

$('li.lists').wrapInner(function () {
    return "<a href='" + $(this).text() + "'></a>";
});

js小提琴示例

你和上一个例子很接近了。试试这个：

$('.lists').each(function() {
    var href = $(this).text();
    $(this).html($('<a>').attr('href', href).text(href));
});

js小提琴

尝试

$('li.lists').html(function (_, old_html) {
    return '<a href="' + old_html + '">' + old_html + '</a>';
});

小提琴演示

.html（）

正如这篇jQuery文章所提到的，$.each用于非JQuery对象，而.each（）用于jQuery对象。由于您使用 jQuery 选择器设置每个标签的 href 属性，因此您需要使用 .each（） 来使用 wrapInner 及其 href 设置标签：

$('.lists').each(function() {
    $(this).wrapInner('<a class="links"> </a>');
    $(this).children('a').attr({'href':$(this).text()});
})

JSFIDDLE 示例

你应该尝试这样的事情：

$('.lists').each(function() {
$(this).wrapInner('<a class="links" href="'+$(this).text()+'"> </a>');
});
你也可以使用 $.

each 表示所有li.list和 $.append（） 来附加子元素（ <a> 标记）。

演示

$('li.lists').each((i,el) => {
  let text =$(el).text();
  $(el).text('');
  $(el).append($('<a>').attr('href', text).text(text));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class='lists'>http://google.com</li>
<li class='lists'>http://facebook.com</li>
<li class='lists'>http://twitter.com</li>
<li class='lists'>http://youtube.com</li>

相关文章：