jquery - jQuery：获取样式属性并将其附加到新的

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.
 });

这样您就不会每次都查找/制作 jQuery 对象$(this)！

Answer 4

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

$(this).wrap("<div class='imgtxt' style=\"" + $(this).attr("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>');
});