javascript - jQuery Prepend Open Tag Append Closing Tag

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

编辑：添加了过滤器方法来摆脱空白文本节点

Answer 2

jQuery 只适用于完整的元素，你不能只附加一个结束或开始标签。

如果 ul 没有任何其他列表项，您可以简单地使用 wrapInner

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

如果它确实包含 LI，最简单的方法是将它们分离，包装内部，然后附加它们。

var $lis = $('nav[role="breadcrumb"] ul > li').detach();
$('nav[role="breadcrumb"] ul').wrapInner("<li />").prepend($lis);

Answer 3

尝试先创建您的 <li> ，然后将您的选择器附加到它：

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

然后使用 $li 替换或附加您喜欢的任何位置。