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

score 3 · Accepted Answer

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

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

您可以在此处对其进行测试，这需要<img>然后将它们都<a>包装在该容器中。<div>

score 1 · Accepted Answer

你也可以去掉 each() （或者在尼克的片段中用你的选择器替换它）：

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

2 回答 2