jQuery插入元素.before（）和.after（）不能按预期工作，我做错了什么？

Question

我试图用div标签动态地包围IMG和A标签组，但无法使其工作。

我的html：

<img class="myClass-1" src="img5" /> 
<a class="myClass-2" href="url"></a> 

我的脚本：

$('img.myClass-1').each(function(){ 
    $(this).before('<div style="position: relative;">'); 
    $(this).next().after('</div>'); 
}); 

我萤火虫结果：

<div style="position: relative;"/> 
<img class="myClass-1" src="img5" /> 
<a class="myClass-2" href="url"></a> 

我试图做到：

<div style="position: relative;"> 
<img class="myClass-1" src="img5" /> 
<a class="myClass-2" href="url"></a> 
</div> 

我更换

$(this).next().after('</div>'); 

与

$(this).next().after('<p>test</p>'); 

只是为了看看它无法执行的.next（）（）之后的代码，但它工作正常。我是使用jQuery的新手，无法弄清楚我做错了什么。有人可以帮忙吗？请。

Answer 1

您可以使用.wrapAll()，像这样：

$(this).next().andSelf().wrapAll('<div style="position: relative;" />'); 

You can test it out here，这需要<img>和<a>然后包装他们都在<div>容器。

Answer 2

你也可以摆脱每（）（或只是与尼克的片段您选择替换此）：

$('img.myClass-1').next().andSelf().wrapAll('<div style="position: relative;" />');