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

【问题标题】：Use jQuery to change wp-caption inline style from img attribute使用 jQuery 从 img 属性更改 wp-caption 内联样式
【发布时间】：2011-07-17 07:30:49
【问题描述】：

我正在尝试使用 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。我想将此内联样式重置为与图像的宽度属性相同。我不完全确定 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。

【问题讨论】：

@webXL @igor-dymov 谢谢！

标签： jquery wordpress

【解决方案1】：

试试这个：

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

【讨论】：

这行得通，除了当页面上有多个图像时，它会从第一个图像中获取宽度并将其应用于所有容器。知道如何做每一个吗？

【解决方案2】：

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

【讨论】：

...除非页面上有多个图像，否则它会从第一个图像中获取宽度并将其应用于所有容器。知道如何做每一个吗？