jQuery Prepend Open Tag Append 结束标签答案

【问题标题】：jQuery Prepend Open Tag Append Closing TagjQuery Prepend Open Tag Append 结束标签
【发布时间】：2012-09-12 06:00:21
【问题描述】：

首先，我熟悉 .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> 中。

【问题讨论】：

标签： javascript jquery append prepend

【解决方案1】：

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

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

编辑：添加过滤器方法以消除空白文本节点

【讨论】：

哈哈，是的，这太接近了！但是我的 UL 中确实有 2 个空的 LI，可悲的是，这有点搞砸了:(

【解决方案2】：

尝试先创建您的

，然后将您的选择器附加到它：

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

然后使用 $li 替换或追加任何你喜欢的地方。

【讨论】：

感谢您的帮助，但不幸的是我无法让它工作:(

【解决方案3】：

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

【讨论】：

这有什么技巧吗？我有什么办法可以做我正在尝试的事情吗？
感谢您的帮助，但不幸的是，这似乎并不能解决问题。 wrapInner 的第一段代码将我的 UL 中的所有内容都包裹在一个 LI 标记中，当我需要 As 和最后一段文本时，每个都包裹在一个 LI 中。当使用 jQuery 将每个 A 包装在 LI 中，然后将代码与 $lis 一起使用时，似乎什么都没有发生 :(
如果不是 UL 中的纯文本，这将很容易。你试过我的第二个sn-p吗？它应该考虑到在 ul 中有现有的 LI。
是的，我尝试使用 $('nav[role="breadcrumb"] ul a').wrap('
');其次是第二个 sn-p 中的两行代码，它没有做任何事情:(最后一行仍然未包装。