Jquery - 在圖像後添加html然後在div中打包

Question

在我的函數中，我想拍一張圖像，添加一個動態創建的標題，然後將它全部整齊地包裝在一個div中。這樣....

前：

<img src="whatever" /> 

後：

<div class="imageBlock"> 
<img src="whatever" /> 
<span class="caption">The Caption</span> 
</div> 

這是我目前有：

var imageCaption = '<span class="caption">'+array[1]+'</span>' 
$(this).after(imageCaption).wrap('<div class="imageBlock '+array[0]+'" />'); 

這是工作，但將跨度關閉div標籤之外

我不明白爲什麼這不起作用，所以任何有關如何實現我以後的建議將不勝感激。如果有人能夠解釋爲什麼這種方式對我來說將來會有用。

非常感謝。

Answer 1

的ID屬性值你要注意什麼this實際上指。

要得到什麼，你只想要顛倒順序，

var imageCaption = '<span class="caption">'+array[1]+'</span>' 
$(this).wrap('<div class="imageBlock '+array[0]+'" />').after(imageCaption); 

這是因爲正在傳遞你的對象是原始圖像的標籤。最初你在你的標籤上打電話after，以便正確地做到這一點，但是從該調用返回的內容仍然只是原始圖像元素，而不是兩者。所以當你打包時，你只能在原始圖像標籤上調用它。通過首先包裝，圖像標籤成爲包裹元素的子元素，然後after將把它插入到正確的位置。

這可能是更清晰，

var myImage = $(this); 
myImage.after(imageCaption); 
myImage.wrap('<div class="imageBlock '+array[0]+'" />'); 

看這個問題？

Answer 2

嘗試

$(document).ready(function() { 
    $('#x').wrap('<div class="imageBlock">'); 
$('<span class="caption">The Caption</span>').insertAfter($('#x')); 
});​ 

'x' 爲<img src="whatever">元素

Answer 3

這裏是一個小提琴您起步： http://jsfiddle.net/c3nxe/