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的打开和关闭发生了。我敢打赌它是超级基本但我无法看到它。任何帮助都非常受欢迎。

干杯。

Answer 1

如果不关闭它，就无法打开div。

或说出它的正确方法：你不能用before（或任何类型的追加算子）打开一个元素而不用相同的操作关闭它。

这意味着你不能拥有.before('<div>')，之后就是.after('</div>')。

为此，您可以使用wrap。

Answer 2

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

当您尝试添加起始标记时，浏览器将添加结束标记以完成它。当您尝试结束结束标记时，它将被忽略。（至少在您使用的浏览器中。对于其他浏览器，行为可能会有所不同。）

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

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

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

Answer 3

这就是它的工作方式。您正在使用.before（）函数在元素之前插入无效的HTML。没有结束标记的div元素无效，浏览器会自动附加结束标记以尝试解决问题。

不要使用.before（）和.after（），而是查看.wrap（）方法。

jQuery .before和.after表现不如预期

3 个答案: