如何將錨標記添加到列表中的文本

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

小提琴

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