Используйте jQuery для изменения встроенного стиля wp-заголовка из атрибута img

Question

Я пытаюсь использовать jQuery для изменения HTML-кода шорткода WordPress [caption], чей 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добавьте дополнительные 10px в контейнер .wp-caption, когда заголовок изображения присутствует.Я хочу сбросить этот встроенный стиль, чтобы он был таким же, как атрибут ширины изображения.Я не совсем уверен, как должны работать 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: Решено - см. эту тему .

Answer 1

Попробуйте это:

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

Answer 2

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