javascript - jQuery 前置打开标签 append 关闭标签

Question

首先，我熟悉. wrapAll()这不是我需要的。我有一些无法更改的标记，我需要将所有内容包装在 <li> 中.

这是我正在尝试做的事情:

$('nav[role="breadcrumb"] ul a').wrap('<li></li>');

$('nav[role="breadcrumb"] ul li:last').after('<li>');

$('nav[role="breadcrumb"] ul').append('</li>');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav role="breadcrumb">
  <ul class="clearfix">
    <a href="http://eggaday.armystage.com/">Home</a>
    <a href="http://eggaday.armystage.com/health-care-professionals/">Health Care Professionals</a> Healthy Choices Cholesterol Kits
  </ul>
</nav>

问题是 jQuery 关闭了这些 <li>标签。这是原始标记:

<nav role="breadcrumb">
  <ul class="clearfix">
    <a href="http://eggaday.armystage.com/">Home</a>
    <a href="http://eggaday.armystage.com/health-care-professionals/">Health Care Professionals</a> Healthy Choices Cholesterol Kits
  </ul>
</nav>

正如你所看到的，我在这个 <ul> 的底部有一些松散的文本。我试图把它包裹在 <li> 中.

Answer 1

.contents() 将获取所有子节点，包括文本节点

$('nav[role="breadcrumb"] ul').contents().filter(function() {
   return $.trim($(this).text())!=="";
}).wrap('<li/>');

编辑:添加了过滤方法来消除空白文本节点