如何在图像之后添加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

你必须注意this实际上指的是什么。

为了得到你想要的东西，只需颠倒顺序，

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

这是因为您传递的对象是原始图像标记。最初你在你的标签上调用after，所以它正确地做到了，但从那个调用返回的内容仍然只是原始的图像元素，而不是两者。因此，当您调用wrap时，您只在原始图像标记上调用它。通过先包装，图像标签成为包装元素的子元素，然后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">元素的ID属性值

Answer 3

这是一个让你失望的小提琴：http://jsfiddle.net/c3nxe/