Question

到目前为止我的代码：

$(".lorem img:not(.full-img)").each(function() { 
    $(this).addClass("inline-img");
    var imgWidth = $(this).prop('width');
    var imgHeight = $(this).prop('height');
    var imgFloat = $(this).prop('float');

    $(this).wrap('<div class="inline-img-wrap" />'); 
        if ($(this).prop("title")!='') {
            $('<p class="inline-img-caption">').text($(this).prop('title')).insertAfter($(this)); 
        }
});

我正在文本正文中搜索图片，将title值附加为下方的字幕，并将img和p包裹在div.inline-img-wrap中。这很好。

我需要帮助的是将img的样式应用于新的包装div。您可以看到我已经为此创建了变量，但无法将它们应用于工作中。 $this将始终应用于图片，<div class="inline-img-wrap" style="width:'+imgWidth+'">不起作用。

所有建议都表示赞赏！

Answer 1

尝试使用data属性和css方法：

<img data-class='something'  src=''/>;

 $(".lorem img:not(.full-img)").each(function() { 
    $(this).addClass("inline-img");
    var imgWidth = $(this).css('width');
    var imgHeight = $(this).css('height');
    var imgFloat = $(this).css('float');

    $(this).wrap('<div class="inline-img-wrap + " " + $(this).data('class') + " />'); 
        if ($(this).prop("title")!='') {
            $('<p class="inline-img-caption">').text($(this).prop('title')).insertAfter($(this)); 
        }

    $("." + $(this).data('class')).css({"width": imgWidth, `height`: imgHeight, `float`: imgFloat})
});

Answer 2

我是否认为您需要检索新创建的包装元素？

var $wrap = $(this).wrap('<div class="inline-img-wrap" />').parent();
if ($(this).prop("title")!='') {
    $('<p class="inline-img-caption">').text($(this).prop('title')).appendTo($wrap); 
}
// do any other manipulations with $wrap

P.S。作为一个方面 - 不：缓存你的jQuery对象 - 你经常调用$（this）这是次优的

JQuery：如何将css应用于.wrap元素？

2 个答案: