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

Question

我最近开始了关于jQuery的课程，并想知道我的代码出了什么问题。我想每一个前“wcprow” DIV和结束的div后关闭李加开立...所以它看起来像：

<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。 A div不能是ul|ol -element的子女。尽管你将通过在li元素后面包装容器来“修复”这个元素，但是你的代码从一开始就应该是完整的。