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;" />');

您可以在此处进行测试，这需要 和 < a> 然后将它们都包装在该

容器中。

Answer 2

您还可以删除each()（或者只是将其替换为尼克代码片段中的选择器）：

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