jquery - 文章中的内联图像和标题 - 使标题的宽度与图像的宽度一致

Question

这是我的代码：

<div class="image">
<img src="image.jpg" alt="Image description" />
<p class="caption">This is the image caption</p>
</div>

这是我的CSS：

.image {
position: relative;
float: right;
margin: 8px 0 10px 10px;
}

.caption {
font-weight: bold;
color: #444666;
}

如上所述，标题将符合 div.image 的宽度。我的问题通常是img的大小不同，从 100px 宽度到 250px 宽度。我想让标题宽度符合图像的相应宽度，无论大小。

虽然我也希望它更具语义性，但我不确定用img切换p.caption有多容易。当然，我更喜欢这种方法，但我会一步一步来。

是否有一些 jquery 代码可用于检测图像的宽度并将该宽度作为内联样式添加到标题标签？

有一个更好的方法吗？我愿意接受建议。

Answer 1

你可以这样做：

$(window).load(function() {
  $(".image p.caption").each(function() {
    $(this).width($(this).siblings("img").width()).prependTo($(this).parent());
  });
});

这也做了你要求 的<p>之前的移动。<img>

对于测试，您可以在此处查看工作演示。