Question

我正在尝试使用jQuery来修改WordPress [caption]短代码的HTML，其HTML基本上是这样的：

<div class="wp-caption" style="width: 310px">
<img class="size-medium" src="..." width="300" height="200" alt="" />
<p class="wp-caption-text">The caption is here.</p>
</div>

这个问题（至少对我来说）是WordPress在当前的图像标题中为.wp-caption容器添加额外的10px。我想将此内联样式重置为与图像的width属性相同。我不完全确定这个var部分应该如何工作（或者如果有更好的方法来连接字符串），我会感谢任何正确的帮助：

jQuery().ready(function() {
    jQuery(".wp-caption").removeAttr("style");
    var width = jQuery(".wp-caption img").Attr(width);
    var width = jQuery(width).Prepend('width:');
    var width = jQuery(width).Append('px');
    jQuery(".wp-caption").attr('style', jQuery(width));
    });

更新1：现在我只需要了解当页面上有多个图像时如何工作。我尝试将其包装在.each(function(n)中，但它仍然从第一个图像获取宽度并将其应用于所有容器。

jQuery().ready(function() {
    jQuery(".wp-caption").each(function(n) {
    var width = jQuery(".wp-caption img").width();
    jQuery(".wp-caption").width(width);
    });
    });

更新2：已解决 - 请参阅this thread。

Answer 1

$(document).ready(function() {
    var width = $(".wp-caption img").attr("width") + "px";
    $(".wp-caption").css('width', width);
});

Answer 2

试试这个：

var width = jQuery(".wp-caption img").width();
jQuery(".wp-caption").width(width);

使用jQuery从img属性更改wp-caption内联样式

2 个答案: