2

在我的函数中，我想为一张图片添加一个动态创建的标题，然后将其整齐地包装在一个 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标记之外。

4

3 回答 3

3

您必须注意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]+'" />');

看到问题了吗？

于 2012-05-08T14:50:59.893 回答
0

尝试

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

'x' 是<img src="whatever">元素的 ID 属性值

于 2012-05-08T14:50:21.273 回答
0

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

于 2012-05-08T14:56:23.760 回答