Question

目前我有一个这样的图像（由CKEditor创建）：

<img src="foo.jpg" style="float: left; margin-left: 20px;" alt="Image text">

我想在此图片周围添加div，并将alt-tag中的文本提取到范围中。

$(document).ready(function () {
    $("#foo img").each(function() {
        $(this).wrap("<div class='imgtxt' />");
        $(this).after($("<span />").text($(this).attr("alt")));
     });
});

到目前为止，上帝！但是我也希望从img中获取样式属性并将其添加到新创建的div的CSS中。我怎样才能做到这一点？

Answer 1

试试这个

$(document).ready(function () {
    $("#foo img").each(function() {
        $(this).wrap("<div class='imgtxt' />");
        $('.imgtxt').attr('style', $(this).attr('style'));
        $(this).after($("<span />").text($(this).attr("alt")));
     });
});

Answer 2

您可以使用：

$(document).ready(function () {
    $("#foo img").each(function(index) {
        $(this).wrap("<div id='newdiv" + index + "'" class='imgtxt' />");
        $(this).after($("<span />").text($(this).attr("alt")));
        $("#newdiv" + index).attr('style', $(this).attr('style');
     });
});

您基本上是为每个DIV创建一个唯一ID，然后每次都应用该样式

Answer 3

$(this).closest('div.imgtxt').attr('style', $(this).attr('style'));

closest()会抓住您刚刚创建的div。我还建议将代码更改为：

$("#foo img").each(function() {
    var $this = $(this);
    $this.wrap("<div class='imgtxt' />");
    $this.after($("<span />").text($this.attr("alt")));
    // etc.
 });

这样，每次调用$(this)时都不会查找/创建jQuery对象！

Answer 4

将此行$(this).wrap("<div class='imgtxt' />");替换为：

$(this).wrap("<div class='imgtxt' style=\"" + $(this).attr("style") + "\" />");

这会获取图片的style属性并将其添加到新的div。

Answer 5

$('img').each(function() {
    var alt   = $(this).attr('alt'),
        style = $(this).attr('style');
    $(this).after("<span>" + alt + "</span>")
           .next('span')
           .andSelf()
           .wrapAll('<div class="imgtxt" style="'+style+'"></div>');
});

jQuery：获取style属性并将其追加到新的<div> </div>

5 个答案: