jsFiddle

Question

我有四个清单

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

我想在列表的值中包含一个a标记，其中href=值来自列表中的值。

我想要达到的最终结果是：

<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>');

使用li标记将a内的内容包装起来，但我对如何将链接放入a字段的逻辑缺乏了解。

我试过

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

但是这会更改指向http://youtube.com的所有链接，这是最后一个链接，您可以在JSFiddle here

中看到

Answer 1

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

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

<强> jsFiddle example

Answer 2

你接近你的最后一个例子。试试这个：

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

jsFiddle

Answer 3

尝试

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

fiddle Demo

<小时/> .html()

Answer 4

如this jQuery article所述，$ .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 example

Answer 5

你应该尝试这样的事情：

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

Answer 6

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

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

6 个答案:

jsFiddle