jQuery .before 和 .after 未按预期运行

Question

我有以下 HTML 代码

<p><img src="src.jpg" clas="left" title="image title text"></p>

和下面的 jQuery

$( document ).ready(function() {
    $('img').each(function() {
        var t = $(this).attr('title'),
            c = $(this).attr('class'),
            w = $(this).width();
        $(this).before('<div class="caption ' + c + '">');
        $(this).after(t + '</div>');
    });
});

然而，这给我的输出如下

<p><div class="caption left"></div>
<img src="src.jpg" clas="left" title="image title text">
image title text</p>

当我在 .after 部分指定结束标记时，我终究无法理解为什么 DIV 的打开和关闭发生在之前。我敢打赌它是 super 基本的，但我就是看不到它。非常感谢任何帮助。

干杯。

Answer 1

您只能向文档中添加元素，而不能添加标签。当页面的 HTML 代码被解析时，开始和结束标记最终成为 DOM 中的单个元素对象。

当你尝试添加起始标签时，浏览器会添加一个结束标签来完成它。当您尝试结束结束标记时，它将被忽略。 (至少在您使用的浏览器中是这样。其他浏览器的行为可能有所不同。)

要将一个元素包裹在另一个元素周围，请使用 wrap method或 wrapAll method :

$(this).wrapAll('<div class="caption ' + c + '"></div>').after(t);

演示:http://jsfiddle.net/JR4j3/