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