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

我的Firebug结果：

<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（）。after（）代码，但它工作正常。我是新手使用jQuery，无法弄清楚我做错了什么。有人可以帮忙吗？请。

Answer 1

您可以使用.wrapAll()，如下所示：

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

You can test it out here，这需要<img>和<a>然后将两者包装在<div>容器中。

Answer 2

你也可以摆脱each（）（或者用Nick的代码片段中的选择器替换它）：

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