在指定标记之前和之后添加包装标记

Question

我最近开始了一个关于jQuery的课程，并想知道我的代码出了什么问题。我想在每个＆＃34; wcprow＆＃34;之前添加一个开头的li。 div和关闭div之后关闭li ...所以它看起来像：

<li>
<div class="wcprow">
    Content
</div>
</li>

我目前的HTML是

<ul>

<div class="wcprow">
    Content
</div>

<div class="wcprow">
    Content
</div>

<div class="wcprow">
    Content
</div>

</ul>

和jQuery：

$('.wcprow').before("<li>"); $('.wcprow').after("</li>");

Fiddle Here

当我通过开发工具查看时，它会在打开工具后直接输出结束符号。这不是我想要的。

<li></li><div class="wcprow">
    Content
</div>

我在本课程开始时可能会在以后偶然发现答案......但是想知道是否有人可以给我任何指示，所以我不会考虑太多。

Answer 1

您错误地解释了.before()和.after()的工作方式。如果你这样称呼它：

$('.wcprow').before('<li>');

它将创建一个新元素（想象document.createElement('li')），它将在.wcprow之前插入这个完整的节点。它不会只插入一个开始或结束标签。它与：

相同

let e = document.createElement('li');
$('.wcprow').before(e);

您要做的是将元素包装在另一个元素中。因此，您正在寻找.wrap()：

  

围绕匹配元素集中的每个元素包装HTML结构。

这很简单：

$('.wcprow').wrap('<li></li>');

进一步阅读

• jQuery .wrap()
• jQuery .before()
• jQuery .after()

<强>演示

Try before buy

注意

您从无效的HTML开始。 div不能是ul|ol - 元素的子元素。即使你要去修理＆＃34;通过将容器包装在li - 元素之后，您的代码应该从一开始就完整无缺。