在我的函数中,我想将一个图像添加一个动态创建的标题,然后将它整齐地包装在一个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
标签之外。
你必须注意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]+'" />');
看到问题?
尝试
$(document).ready(function() {
$('#x').wrap('<div class="imageBlock">');
$('<span class="caption">The Caption</span>').insertAfter($('#x'));
});
'x'是<img src="whatever">
元素的ID属性值
这是一个让你失望的小提琴:http://jsfiddle.net/c3nxe/