Question

我有这个清单

<ul>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
</ul>

我想用锚标记包装列表中的所有文本，例如像这样的

<ul>
<li><a href="">Test</a></li>
<li><a href="">Test</a></li>
<li><a href="">Test</a></li>
<li><a href="">Test</a></li>
</ul>

使用jquery。内容是动态创建的，因此我无法控制要编辑的代码。

我在一些教程中使用了这段代码但没有成功。

$("ul li").wrap(function() {
   var link = $('<a/>');
   link.attr('href', '');
   link.text($(this).text());
   return link;
});

Answer 1

您可以使用wrapInner

$('ul li').wrapInner('<a href="#"/>');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
</ul>

Answer 2

$('ul li').contents().wrap('<a href="#"></a>');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
</ul>

只需在jquery中使用.wrap()

$('ul li').contents().wrap('<a />');

如果要在锚标记中添加href属性

$('ul li').contents().wrap('<a href="#"></a>');

Fiddle

Answer 3

(function($) {
  $(function() {
    $('ul li').each(function() {
      var li = $(this),
        text = li.text();

      // li.html('<a href="">' + text + '</a>');
      li.text('').append('<a href="">' + text + '</a>');
    });
  });
})(jQuery);

li.html('<a href="">' + text + '</a>');几乎删除了每个li中的所有内容，因为我不知道这是否有意义删除文本并附加<a>使用更安全li.text('').append('<a href="">' + text + '</a>');

如何将锚标记添加到列表中的文本

3 个答案: