jQuery Prepend Open Tag附加结束标记

时间:2012-09-19 21:14:12

标签: javascript jquery append prepend

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

3 个答案:

答案 0 :(得分:2)

.contents()将获得所有孩子,包括文本节点

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

编辑:添加了过滤方法以摆脱空白文本节点

答案 1 :(得分:0)

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

答案 2 :(得分:0)

尝试创建&lt; li&gt;首先,然后将选择器附加到它:

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

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