jQuery Prepend Open Tag附加结束标记
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQuery Prepend Open Tag附加结束标记相关的知识,希望对你有一定的参考价值。
首先,我熟悉.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>
中。
答案
.contents()
将获得所有孩子,包括文本节点
$('nav[role="breadcrumb"] ul').contents().filter(function() {
return $.trim($(this).text())!=="";
}).wrap('<li/>');
编辑:添加了过滤方法来摆脱空白文本节点
另一答案
首先尝试创建<li>,然后将选择器附加到它:
var $li = $('<li>').append('nav[role="breadcrumb"] ul a');
然后使用$ li替换或追加您喜欢的任何地方。
另一答案
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);
以上是关于jQuery Prepend Open Tag附加结束标记的主要内容,如果未能解决你的问题,请参考以下文章